Question

我试图让一个简单的bootstrap的模态样本起作用，我按照this document说“你可以轻松激活页面上的模态，而不必写一行javascript。只需给元素一个数据-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…</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”时，根本没有任何事情发生，有什么我错过的吗？

Answer 1

小提琴1 ：Twitter bootstrap网站上使用的模式的副本。（这是默认情况下不显示的模式，但会在何时启动你点击演示按钮。）

http://jsfiddle.net/9RcDN/

小提琴2 ：引导程序文档中描述的模式的副本，但它包含了必要的元素，以避免使用任何JavaScript。请特别注意在hide div上包含#myModal类，以及在“关闭”按钮上使用data-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…</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上运行的，虽然the official twitter bootstrap site是2.0.3。

Answer 2

我终于从“Sven”找到了this solution并解决了这个问题。我做的是我包括“bootstrap.min.js”：

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

而不是：

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

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

Answer 3

另外看看BootBox，在bootstrap模式中显示警报和确认框非常简单。 http://bootboxjs.com/

实施就像这样简单：

正常警报：

bootbox.alert("Hello world!");

确认：

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

PROMT：

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

尝试跳过p标签或用h3标签或类似标签替换它。替换：

<p>One fine body…</p>

与

<h3>One fine body…</h3>

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

Answer 8

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

获取

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

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

Answer 9

此外，

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

您还获得了Bootsrap Modal Dialog包（非常重要）
如果您正在使用捆绑，则已将其添加到bundle.config。

Answer 10

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

  "scripts": ["../node_modules/jquery/dist/jquery.min.js",
              "../node_modules/bootstrap/dist/js/bootstrap.min.js"],

Answer 11

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

Ex github：

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

使用eModal显示警报，ajax，提示或确认的模式

// Display an alert modal with default title (Attention)
eModal.alert('You shall not pass!');

Answer 12

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

Answer 13

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

无法获得简单的bootstrap模式

13 个答案: