Question

我是初学者，我正在尝试使用Modals添加弹出窗口。我添加了代码和脚本，但是当你点击按钮时它没有弹出。我可以说一些事情即将发生，因为背景稍微消失但弹出窗口不会出现。所以我需要一些帮助来弄清楚为什么它不会出现。

My JavaScript links: 
<script src="js/jquery-1.10.2.js" type="text/javascript"></script>
   <script src="js/bootstrap.min.js" type="text/javascript"></script>

Code for Modals: 
<div class="modal hide fade" id="myModal">

           <div class="modal-header">
    <a class="close" data-dismiss="modal">×</a>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>

<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>

Answer 1

这是兼容性问题v2.X vs v3.X

Bootstrap 3.0新课程＆amp;元素

模态标记已更改.modal-header .modal-body .modal-footer现已包含在.modal-content和.modal-dialog
中

模态迁移

如何从2.x转换为3.0模式：

从.hide删除.modal（默认情况下已隐藏）

在.modal-header
中包裹.modal-body .modal-footer .modal-content
在.modal-content
中包裹.modal-dialog

事件是命名空间。例如，要处理模态'show'事件，请使用'show.bs.modal'。

<强> Reference

Bootstrap 3模态示例：

<a data-toggle="modal" href="#myModal" class="btn btn-primary">Launch modal</a> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Modal title</h4> </div> <div class="modal-body"> Content for the dialog / modal goes here. </div> <div class="modal-footer"> <a href="#" data-dismiss="modal" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div> </div> </div>

JSFiddle

Answer 2

使用CDN的完整示例。因此，您可以从Url下载最新版本

<html>
    <head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css">


<script type="text/JavaScript" src="http://code.jquery.com/jquery-1.11.2.js"></script>
<script type="text/JavaScript" src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>

    <body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">Modal title</h4>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
    </body>
</html>

Answer 3

我通常只使用JavaScript和Bootstrap为模态做的是在按钮上有一个onClick事件，它执行一个显示模态的JavaScript方法。

在您的HTML中：

<button onclick="myFunction()">Click me</button>
<script>
    function myFunction(){
        $('#myModal').modal('show') 
    }
</script>

只需将功能名称myFunction更改为您想要的名称，将myModal更改为模式的ID。

以下是模式内容所在的bootstrap文档，供将来参考getbootstrap.com/javascript/

Bootstrap Modal没有弹出

3 个答案: