Question

我有一个简单的按钮，它使用bootstrap的模态，就像一个弹出式div。我无法让它发挥作用。当我点击按钮时，没有任何反应。我用的是firefox。我可能忘记了一些简单的事情，但我无法找到问题所在。

        <!DOCTYPE html>
        <html>
          <head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script type='text/javascript' src='http://twitter.github.com/bootstrap/1.4.0/bootstrap-modal.js'></script>
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css">

     </head>
     <body>

      <a class="btn" data-controls-modal="my-modal" data-backdrop="static" id='mod'>Launch Modal</a>

     </body>
   </html>

Answer 1

另外，请确保包含css规则以设置背景元素的样式。例如：

.modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000000;
}

.modal-backdrop.fade {
  opacity: 0;
}

.modal-backdrop, .modal-backdrop.fade.in {
  opacity: 0.8;
  filter: alpha(opacity=80);
}

Answer 2

  <div class="modal-backdrop fade in"  ></div>
  <div class="modal hide fade in" id="my-modal" style="display: none;">
    <div class="modal-header">
        <a class="close" href="#">×</a>
        <h3>Modal Heading</h3>
    </div>
    <div class="modal-body">
       <p>One fine body…</p>
    </div>
    <div class="modal-footer">
        <a class="btn primary" href="#">Primary</a>
        <a class="btn secondary" href="#">Secondary</a>
    </div>

您必须将此代码放在页面正文中，这是弹出窗口（模态）的html代码。用于此代码的文件较少是patterns.less。而my-modal是弹出窗口的id

希望这适合你。

Bootstrap Modal无法正常工作

2 个答案: