How to get twitter bootstrap modal to close (after initial launch)

Question

I'm very much a noob, so I think I'm overseeing something (probably obvious) with twitter bootstrap modal. What I am trying to do is get a modal to launch only on mobile. This works fine with adding the class .visible-phone on the modal div. So far so good. But then I want it to work, meaning you can close it with the X button. And I cannot get the button to work.

<div class="modal visible-phone" id="myModal">   <div class="modal-header">     <button class="close" data-dismiss="modal">×</button>     <h3>text introductory<br>want to navigate to...</h3>  </div>  <div class="modal-body">     <ul class="nav">       <li> ... list of links here </li>     </ul>    </div>   </div> 

In the bottom of the html I put jquery.js (first) and bootstrap.modal.js and bootstrap.transition.js. Actually all of the bootstrap js modules (not to miss an include). I'm not experienced with js..

Please forgive me if I posed a really stupid Q. I could not find the answer to this specific situation in the log.

Answer 1

$('#myModal').modal('hide') should do it

Answer 2

I had problems closing the bootstrap modal dialog, if it was opened with:

$('#myModal').modal('show'); 

I solved this problem opening the dialog by the following link:

<a href="#myModal" data-toggle="modal">Open my dialog</a> 

Do not forget the initialization:

$('#myModal').modal({show: false}); 

I also used the following attributes for the closing button:

data-dismiss="modal" data-target="#myModal"