Twitter Bootstrap Modal

Question

The modal javascript plugin is working fine. I had a question regarding the library itself.

If you notice in this link

http://twitter.github.com/bootstrap/javascript.html#modals
// click on LAUNCH DEMO MODAL

The modal drop from the top of the screen into the vertical center of the screen. Is this functionality provided in the plugin or is it javascript that I will have to write myself ?

Thanks.

Answer 1

Add the fade class to the modal in order to get this transition.

Your html should then look something like

<div id="myModal" class="modal hide fade">
  <div class="modal-header"></div>
  <div class="modal-body"></div>
  <div class="modal-footer"></div>
</div>

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch Modal</a>

Check it out in action on JsFiddle here

From the documentation:

Heads up! If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.

Answer 2

Per the documentation, the functionality is provided in the plugin:

If you want your modal to animate in and out, just add a .fade class to the .modal element (refer to the demo to see this in action) and include bootstrap-transition.js.