Categories
JavaScript Answers

How to remove slide down effect with Twitter Bootstrap modal with CSS?

Spread the love

Sometimes, we want to remove slide down effect with Twitter Bootstrap modal with CSS.

In this article, we’ll look at how to remove slide down effect with Twitter Bootstrap modal with CSS.

How to remove slide down effect with Twitter Bootstrap modal with CSS?

To remove slide down effect with Twitter Bootstrap modal with CSS, we can set the transition and transform styles to none.

For instance, we write

.modal.fade .modal-dialog {
  -moz-transition: none !important;
  -o-transition: none !important;
  -webkit-transition: none !important;
  transition: none !important;

  -moz-transform: none !important;
  -ms-transform: none !important;
  -o-transform: none !important;
  -webkit-transform: none !important;
  transform: none !important;
}

to select the elements with the modal-dialog class in the elements with the modal-fade class and set their transition and transform styles to none for each kind of browser.

We use !important to override the existing styles.

Conclusion

To remove slide down effect with Twitter Bootstrap modal with CSS, we can set the transition and transform styles to none.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *