0

我尝试使用 Twitter Bootstrap 和以下代码创建模式窗口

<link rel= "stylesheet" href = "/static/bootstrap/css/bootstrap.css" >
<script src ="/static/bootstrap/js/bootstrap-modal.js" ></script>
<script type = "text/javascript" src= "/static/bootstrap/js/bootstrap.js" ></script>
<script src="/static/js/jquery.js></script>
<div class="modal hide" id="myModal">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h3>Modal header</h3>
    </div>
    <div class="modal-body">
        <p>One fine body…&lt;/p>
    </div>
    <div class="modal-footer">
        <a href="#" class="btn" data-dismiss="modal">Close </a>
        <a href="#" class="btn btn-primary"> Save changes </a>
    </div>
</div>
<a class="btn" data-toggle="modal" href="#myModal"> Launch Modal </a>

但它仍然只显示一个按钮。我点击链接，没有任何反应，模式窗口没有弹出。请帮我找出我做错了什么？PS我现在才开始学习。如果你能告诉我我的错误在哪里，那就太好了。

4

1 回答 1

2

你正在加载你的bootstrap.jsafter bootstrap-modal.js。

同样，最好将它们移动到<body>.

<html> 

    <head>
        <link href="bootstrap.css" rel="stylesheet"> 
    </head>

    <body>

        <div class="container">

        <div id="example" class="modal hide fade in" style="display: none; ">

            <div class="modal-header">
                <a class="close" data-dismiss="modal">?</a>
                <h3>This is a Modal Heading</h3>
            </div>

            <div class="modal-body">
                <h4>Text in a modal</h4>
                <p>You can add some text here.</p>              
            </div>

            <div class="modal-footer">
                <a href="#" class="btn btn-success">Call to action</a>
                <a href="#" class="btn" data-dismiss="modal">Close</a>
            </div>

        </div>

        <a data-toggle="modal" href="#example" class="btn btn-primary btn-large">Open modal</a>

        <script src="jquery.js"></script>
        <script src="bootstrap-modal.js"></script>

    </body>

</html>
于 2012-08-11T14:50:02.110 回答