Twitter Bootstrap 2.1 - Modal is not working properly
I tried to integrate the twitter bootstrap modal but for some reason it doesn't work.
The problem is that the modal is shown when the page has loaded.
I wrote this in my <head>
<script type="text/javascript">
$('#myModal').modal({show: false,keyboard: false});
</script>
But there is no effect.
The code I used: ( http://twitter.github.com/bootstrap/javascript.html#modals )
<-- Button to trigger modal -->
<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
<-- Modal -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine 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>
It renders directly after the page has loaded, if I press the modal button again it disappears, and the 2nd time it appears but the whole page is darkend (even the modal itself is darkend)
Anyone experienced the same problem?
I pushed it to heroku so you can see the problem. http://elobeast.com/ (top right corner "Launch demo modal")
Answer
You need to add the class .hide to the main container of your modal to hide it until it is called.