Menu
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")
582
Change the size of the modal by adding the .modal-sm class for small modals, .modal-lg class for large modals, or .modal-xl for extra large modals.
Modals are built with HTML, CSS, and JavaScript. They're positioned over everything else in the document and remove scroll from the <body> so that modal content scrolls instead. Clicking on the modal “backdrop” will automatically close the modal. Bootstrap only supports one modal window at a time.
Bootstrap By Building Projects - Includes Bootstrap 4A modal is a child window that is layered over its parent window. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent window. Child windows can provide information, interaction, or more.
You need to add the class .hide to the main container of your modal to hide it until it is called.
51
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
