Reputation: 340
I have a very simple HTML that should open a fading modal, but it only shows and hide 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 Twitter Bootstrap docs.
In jsFiddle this simple code works just great! But if I save the above code like .html inside a folder with all required files (.css and .js), modal open in a simple way, without fading!
What am I doing wrong?
Thanks in advance.
Upvotes: 4
Views: 4617
Reputation: 1
.modal.in .modal-dialog {-moz-transform: translate(0,0) !important;}
add this to your css
Upvotes: 0
Reputation: 75409
That is because the modal effects are CSS3 effects and you're not including the plugin that handles that, so just load the bootstrap-transition.js
plugin before the modal plugin and it should work.
Upvotes: 7
Reputation: 10346
When using only bootstrap-modal.js, I experience the same as you. But it works when i use the compiled bootstrap.js
Upvotes: 1