Close and open new modal by clicking a link - wordpress

Question

I have two modals created with bootstrap - one for sign in and one for sign up. In each modal I have a link which I want it to refer to the other modal. E.g the sign up modal is open, registered users can click a link inside the sign up modal in order to sign in, and vice versa.
How can I close the sign up div when clicking the sign in link and open the sign in div instead?
complete code in here:
https://jsfiddle.net/f9r3ttpw/
This is the example starting code for the sign up modal:
<div class="modal modal-backdrop fade" id="myModalJoin" tabindex="-1"
role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-contentJoin">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-
label="Close"><span aria-hidden="true">
<span class="glyphicon glyphicon-remove-sign"></span></button>
<h2 class="modal-title join" id="myModalLabel"></h2>
</div>
<div class="modal-body">

Answer 1

Hi Here is working code
Java script
<script type="text/javascript">
$(document).ready(function(){
$("#btn1").click(function(){
$("#myModal").modal('show');
});
$("#btn2").click(function(){
$("#myModal2").modal('show');
});
$("#login").click(function(){
$("#myModal").modal('hide');
$("#myModal2").modal('show');
});
$("#singup").click(function(){
$("#myModal2").modal('hide');
$("#myModal").modal('show');
});
});
</script>
HTML
<div class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
sign up login
<!-- Modal HTML -->
<div id="myModal" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Sign up code here?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" id="login" class="btn btn-primary">login</button>
</div>
</div>
</div>
</div>
<div id="myModal2" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Confirmation</h4>
</div>
<div class="modal-body">
<p>Login code here?</p>
<p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
<button type="button" id="singup" class="btn btn-primary">sign up</button>
</div>
</div>
</div>
</div>
</div>

Answer 2

Twitter Bootstrap has option to open and hide modal window. You just need to call methods properly For example
$(document).ready(function(){
$(".modal1.show").click(function(){
$("#myModal2").modal('hide');
});
$(".modal2.show").click(function(){
$("#myModal1").modal('hide');
});
});