Question

I am learning Web Design by myself and now I’ve started playing with twitter bootstrap’s modal JavaScript plugin.

I’ve created a new modal class named modal-login, it’s a login form inside a modal window. Things have been working good, but the fade effect/slide down does not work. The effect that bring down the modal box from top to center.

I don’t have yet deep understanding of javascript and jQuery.

My question now is, can we edit the bootstrap-modal.js file, so that I may include my new modal class named modal-login and modal-register? so that it could take advantage of the modal fade in effect?

Answer 1

You shouldn’t need to edit the bootstrap-modal.js file. You just need to add the fade class to your modals, and then add some CSS rules.

For example:

.modal-login.fade {
  top: -25%;
  -webkit-transition: opacity 0.3s linear, top 0.3s ease-out;
     -moz-transition: opacity 0.3s linear, top 0.3s ease-out;
      -ms-transition: opacity 0.3s linear, top 0.3s ease-out;
       -o-transition: opacity 0.3s linear, top 0.3s ease-out;
          transition: opacity 0.3s linear, top 0.3s ease-out;
}

.modal-login.fade.in {
  top: 50%;
}

Even better would be if you still kept the plain modal class on your new one’s, and just used your new classes to do overrides. That way you could inherit the CSS above, without having to duplicate it.