andi andi - 1 month ago 9
CSS Question

Bootstrap modal: how to fade in, but immediately disappear on close

In reference to Bootstrap 3 modals: http://getbootstrap.com/javascript/#modals

I use

class="modal fade"
on my outer modal div to create the default fade in/out effect of the Bootstrap modals. But what I really want to do is fade in, but not fade out. I want the modal to disappear immediately and completely when the close button is pushed, without any lingering CSS transitions.

How can I remove the CSS transition when the modal gets closed, but keep it when the modal gets opened?

Answer

Add a handler for the "shown.bs.modal" event, and in that handler, remove the fade class.

$('#myModal').on('shown.bs.modal', function (e) {
  $('#myModal').removeClass('fade');
});

The transition defined by the fade class will then not occur.

Comments