Twitter Bootstrap 2.1 - Modal is not working properly

StackOverflow https://stackoverflow.com/questions/12101104

Question

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")

Was it helpful?

Solution

You need to add the class .hide to the main container of your modal to hide it until it is called.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top