All geek questions in one place

Twitter Bootstrap Modal does not fade

I have very simple HTML code that should open a fade mode, but it only shows and hides without fading in or out.

Here is the code:

<!DOCTYPE html> <html> <head> <link type="text/css" rel="stylesheet" href="css/bootstrap.css" /> <script type="text/javascript" src="jquery.min.js"></script> <script type="text/javascript" src="js/bootstrap-modal.js"></script> </head> <body> <div id="myModal" class="modal hide fade"> <div class="modal-header"><h4>I'm a header</h4></div> <div class="modal-body"><p>Hello from the body</p></div> <div class="modal-footer"> <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> <button class="btn btn-primary">Save changes</button> </div> </div> <a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch Modal</a> </body> </html>

This code was taken from the Twitter Bootstrap documentation.

In jsFiddle, this simple code works just fine! But if I save the above code as .html inside the folder with all the necessary files (.css and .js), it modally opens in a simple way, without fading!

What am I doing wrong?

Thanks in advance.

+4
source share
3 answers

This is because modal effects are CSS3 effects, and you don't include a plugin that handles this, so just load the bootstrap-transition.js plugin before the modal plugin and it should work.

+7
source

When using only bootstrap-modal.js, I experience the same thing as you. But it works when I use compiled bootstrap.js

+1
source 
 .modal.in .modal-dialog {-moz-transform: translate(0,0) !important;}

add this to your css

0
source

Source: https://habr.com/ru/post/1437854/

More articles:


All Articles