Twitter Bootstrap 2.1 - Modal is not working properly

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

質問

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

役に立ちましたか？

解決

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

ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top