Hide Modal in Twitter Bootstrap when clicked

Question

Here is a sample code from twitter bootstrap but . . .

<div class="modal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

The scenario is this: I have a redirect page and I want to display the modal. Yes, of course I made it displayed but how do I close it? I tried different ways the click function but nothing happened.

Answer 1

From bootstrap doc :

Manually hides a modal.

.modal('hide')

$('.modal').modal('hide')

So if you want to hide it on click you can bind this action to the click event

$('#yourid').on('click' , function() { 
  $('.modal').modal('hide')
});

if you want to hide it after some second that you loaded the document you can try with a timeout

$(function(){  //document ready
..
.. //your code
..

 setTimeout(function(){
       $('.modal').modal('hide')
 }, 2000);  //2000 = 2 second

..
})

UPDATE 1

To bind it on the close button give him a class or id

<a href="#" class="btn closebtn">Close</a>

now

$('.closebtn').on('click',function() {
   $('.modal').modal('hide');
});

If you want to bind only on that close button use an id instead of a class

Answer 2

Old post but this can now be done using HTML attributes.

 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>