Geek Answers Handbook

Twitter Bootstrap 2.0.4 Modal - How to apply modal wilting with a new modal class style?

I learn web design myself, and now I started playing with the tweeter bootstrap, a modal JavaScript plugin.

I created a new modal class called modal-login, this is the form for entering the modal window. Everything works well, but the fade effect / slide down does not work. An effect that reduces the modal casket from top to center.

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

Now my question is: can we edit the bootstrap-modal.js file so that I can include my new modal class named modal-login and modal-register? so that he can take advantage of the modal damping effect?

+4
source share
1 answer

You do not need to edit the bootstrap-modal.js file . You just need to add the fade class to your modules, and then add some CSS rules.

For instance:

 .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%; }

It would be even better if you kept a simple modal class on your new one, and just used your new classes to override. This way you can inherit the CSS above without duplicating it.

+3
source

More articles:


All Articles