Question

我尝试使用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…</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>

但它仍然只显示一个按钮。我点击链接没有任何反应，模态窗口不会弹出。请帮我看看我做错了什么？ P.S我刚开始学习它。如果你能告诉我，我的错误在哪里会很棒。

Answer 1

您在bootstrap.js之后加载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>

如何使用Bootstrap创建模态窗口？

1 个答案: