JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
  
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-default  js-link" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <a href="" target="_blank" type="button" class="btn btn-default js-new-link">Open Link?</a>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

JavaScript

$(document.body).on('click', '.js-link', function(event) {
	$('.js-new-link').attr("href", "http://www.google.com");
});

$(document.body).on('click', '.js-new-link', function(event) {
	$('#myModal').modal('hide');
});