Bootstrap 模态不工作

发布于 2024-12-22 19:25:13 字数 710 浏览 2 评论 0原文

我有一个使用 bootstrap 模式的简单按钮，它就像一个弹出 div。我无法让它工作。当我点击按钮时，什么也没有发生。我使用的是火狐浏览器。我可能忘记了一些简单的事情，但我找不到问题所在。

        <!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>

原文

I have a simple button that uses bootstrap's modal, which is like a popup div. I can't get it to work. When i click the button, nothing happens. Im using firefox. I'm probably forgetting something simple, but i can't find the problem.

        <!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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

你如我软肋 2024-12-29 19:25:13

另外，请确保包含 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);
}

also, make sure you include the css rules to style the backdrop elemen. For example:

.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);
}

回复收藏 0 原文

[浮城] 2024-12-29 19:25:13

  <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 代码。
此代码使用的 Less 文件是patterns.less。 my-modal 是弹出窗口的 id

希望这对您有用。

  <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>

You have to put this code in your page body which is the html code of the pop-up(modal).
Less file used for this code is patterns.less. and my-modal is the id of the pop-up

Hope this works for you.

回复收藏 0 原文

~没有更多了~