30

我试图让一个简单的引导程序的模态样本工作，我按照这个文档说“你可以在你的页面上轻松激活模态，而无需编写一行 javascript。只需给一个元素一个 data-controls-modal 属性对应于模态元素 id，...”，但我已尽我所能，并且进行了大量研究，仍然无法让这个简单的模态工作。

<div class="modal" id="myModal">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…&lt;/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-controls-modal="myModal">Launch Modal</a>

或这个：

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

按钮激活模态，我也在页面上加载了 bootstrap-modal.js。除非我添加了一条 javascript 行来处理“Launch Modal”点击事件，否则当我点击“Launch Modal”时，什么都没有发生，有什么我错过的吗？

4

13 回答 13

27

我终于从“Sven”找到了这个解决方案并解决了这个问题。我所做的是将“bootstrap.min.js”包含在：

<script src="bootstrap.min.js"/>

代替：

<script src="bootstrap.min.js"></script>

它解决了看起来很奇怪的问题。谁能解释为什么？

于 2012-05-17T10:11:43.857 回答
24

Fiddle 1：twitter bootstrap 网站上使用的模态的复制品。（这是默认情况下不显示的模式，但在您单击演示按钮时会启动。）

http://jsfiddle.net/9RcDN/

Fiddle 2：引导文档中描述的模式的副本，但它包含必要的元素以避免使用任何 javascript。尤其要注意divhide上包含的类，以及关闭按钮上的使用。#myModaldata-dismiss="modal"

http://jsfiddle.net/aPDVM/4/

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


<div class="modal hide" id="myModal"><!-- note the use of "hide" class -->
  <div class="modal-header">
    <button class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a><!-- note the use of "data-dismiss" -->
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​

还值得注意的是，您使用的网站是在 bootstrap 2.0 上运行的，而官方的 twitter bootstrap 网站是在 2.0.3 上运行的。

于 2012-05-12T03:43:30.730 回答
17

还可以看看 BootBox，在引导模式中显示警报和确认框非常简单。http://bootboxjs.com/

实现就像这样简单：

正常警报：

bootbox.alert("Hello world!");

确认：

bootbox.confirm("Are you sure?", function(result) {
  Example.show("Confirm result: "+result);
});

提示：

bootbox.prompt("What is your name?", function(result) {                
      if (result === null) {                                             
        Example.show("Prompt dismissed");                              
      } else {
        Example.show("Hi <b>"+result+"</b>");                          
      }
});

甚至自定义：

    bootbox.dialog("I am a custom dialog", [{
    "label" : "Success!",
    "class" : "btn-success",
    "callback": function() {
        Example.show("great success");
    }
}, {
    "label" : "Danger!",
    "class" : "btn-danger",
    "callback": function() {
        Example.show("uh oh, look out!");
    }
}, {
    "label" : "Click ME!",
    "class" : "btn-primary",
    "callback": function() {
        Example.show("Primary button");
    }
}, {
    "label" : "Just a button..."
}]);
于 2013-07-31T21:49:52.240 回答
11

我也遇到了 Modals 的问题。我应该在bootstrap.min.js之前声明jquery.min.js（在我的布局页面中）。来自官方网站：“所有插件都依赖于 jQuery（这意味着 jQuery 必须包含在插件文件之前）”

于 2014-12-21T09:12:18.210 回答
5

我也遇到这个问题。我包括 bootstrap.js 和 bootstrap-modal.js。如果您已经有 bootstrap.js，则不需要包含 popover。

于 2012-05-16T14:12:36.473 回答
1

对我来说，当我单击按钮标签时，引导模式显示和消失（在标记中，模式仅使用数据属性显示和隐藏）。在我的 gulpfile.js 中，我添加了 bootstrap.js（具有模态逻辑）和 modal.js 文件。所以我认为在浏览器解析并执行这两个文件之后，两个点击事件处理程序被附加到特定的 dom 元素（每个文件一个），所以一个显示模态另一个隐藏模态。希望这可以帮助某人。

于 2016-09-20T22:05:40.260 回答
0

尝试跳过 p 标签或将其替换为 h3 标签或类似标签。代替：

<p>One fine body…&lt;/p>

和

<h3>One fine body…&lt;/h3>

它对我有用，我不知道为什么，但似乎 p 标签与某些版本的 Bootstrap 不完全兼容。

于 2012-12-16T21:25:55.833 回答
0

更好的解决方案是在没有 jquery 的情况下加载 bootstrap.js 的扭曲版本。从http://daniemon.com/blog/bootstrap-without-jquery/ 获取

<script src=".../bootstrap-without-jquery.min.js"></script>

这样做可以省去脚本标签的麻烦。

于 2014-06-12T21:11:48.853 回答
0

还，

如果您从 Visual Studio 运行页面并安装了引导程序包，您需要确保两件事

  1. 您还获得了 Bootsrap 模态对话框包（非常重要）
  2. 如果您使用捆绑，您已将其添加到 bundle.config。
于 2015-02-08T01:47:10.493 回答
0

我在使用 Angular CLI 时遇到了同样的问题。我需要bootstrap.js.min在.angular-cli.json文件中导入文件：

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],
于 2017-10-24T16:24:56.320 回答
-1

使用模态的一种简单方法是使用eModal！

来自github的前：

  1. 链接到 eModal.js<script src="//rawgit.com/saribe/eModal/master/dist/eModal.min.js"></script>

  2. 使用 eModal 显示警报、ajax、提示或确认的模式

    // Display an alert modal with default title (Attention)
eModal.alert('You shall not pass!');
于 2015-03-16T11:05:26.710 回答
-1

您必须调用 Bootstrap jQuery 插件才能触发它。

于 2015-10-03T09:30:05.283 回答
-1 
<div class="modal fade bs-example-modal-lg" id="{{'modal'+ cartModal.index}}">
  <div class="modal-dialog modal-lg" role="document">
    <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>
      </div>
      <div class="modal-body">
          <div class="col-lg-6" >
            <p class="prodTitle" ng-bind="(cartModal.product.p_name|uppercase)"></p>
            <p class="price-para">
              <span class="currency-cls" ng-bind="cartModal.product.c_currency"></span>
              <span class="price-cls" ng-bind="cartModal.product.p_price"></span>
            </p>
            <p class="select-color">
              <span ng-repeat="color in cartModal.product.p_available_options.colors">
                <button id="color-style" ng-click="cartModal.saveColor(color)" ng-style="{'background-color':color.hexcode}"></button>
              </span>
            </p>
            <br>
            <p class="select-box">
              <span class="size-select-cls">
                SIZE:<select ng-init="items=cartModal.product.p_available_options.sizes" ng-model="cartModal.selectedSize" ng-options="item.code as
                item.name for item in items"></select>
              </span>
              <span class="qty">
                QTY:<input type="number"  min="1" ng-model="cartModal.selectedQty"/>
              </span>
            </p>
            <p class="edit-button">
              <button class="btn-primary btn-lg" data-dismiss="modal" ng-click="cartModal.save();cartModal.calculate()">EDIT</button>
            </p>
          </div>
          <div class="col-lg-6">
            <img ng-src="{{cartModal.product.imageSrc}}">
          </div>
      </div>
    </div>
  </div>
</div>
于 2016-11-19T07:22:31.547 回答