Bootstrap modal - close modal when "call to action" button is clicked
I have a external link inside my modal, and I want the modal to hide after the user has clicked on the link. How do I do that?
Here is my code:
<div class="modal hide fade" id="modalwindow">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3>Title</h3>
</div>
<div class="modal-body">
<p>You need to do a search on google.com for that.</p>
</div>
<div class="modal-footer">
<a id="closemodal" href="https://www.google.com" class="btn btn-primary" target="_blank">Launch google.com</a>
</div>
</div>
<script type="text/javascript">
$('#closemodal').modal('hide');
</script>
You need to bind the modal hide call to the onclick
event.
Assuming you are using jQuery you can do that with:
$('#closemodal').click(function() {
$('#modalwindow').modal('hide');
});
Also make sure the click event is bound after the document has finished loading:
$(function() {
// Place the above code inside this block
});
enter code here
Remove your script, and change the HTML:
<a id="closemodal" href="https://www.google.com" class="btn btn-primary close" data-dismiss="modal" target="_blank">Launch google.com</a>
EDIT: Please note that currently this will not work as this functionality does not yet exist in bootstrap. See issue here.