如何使用引导程序创建模式窗口

How can I create modal window using Bootstrap?

本文关键字：模式 窗口 创建 引导程序 何使用      更新时间：2023-09-26

我尝试使用以下代码使用 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>

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

您在bootstrap-modal.js后加载bootstrap.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>
相关文章：