CODEWITHSUNDEEP
htmlcsstwitter-bootstrap
andi
andi

Reputation: 6522

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?

Upvotes: 0

Views: 2403

Answers (2)

Heretic Monkey
Heretic Monkey

Reputation: 12112

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.

Upvotes: 1

Bricky
Bricky

Reputation: 2745

You could remove the .fade class and find another way to implement the fade-in, for example using a jQuery transition, that way you'll avoid forcefully overriding Bootstrap.

Upvotes: 0

Related Questions