Menu
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.
914
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.
74
When using only bootstrap-modal.js, I experience the same as you. But it works when i use the compiled bootstrap.js
27
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
