Bootstrap modal - close modal when "call to action" button is clicked

Question

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">&times;</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> 

Answer 1

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 

Answer 2

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.