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