不能得到一个简单的引导模式工作(Can not get a simple bootstrap mod

2019-07-29 08:50发布

我试图让一个简单的引导的模式样本的工作,我按照这个文件它说:“你可以激活你的页面上模态容易,而无需编写JavaScript的一个单行。只要给元素的数据控制模态属性,该属性对应于一个模式元素的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>

按钮激活模式,我已经加载了页面上的引导,modal.js为好。 除非我添加了一个JavaScript的行处理“启动莫代尔”点击事件,当我点击“启动莫代尔”,什么都不会发生在所有的,都是有什么,我错过了什么?

Answer 1:

小提琴1:在Twitter上引导网站所使用的模式的翻版。 (这是默认情况下不显示模式,但是当你点击演示按钮启动。)

http://jsfiddle.net/9RcDN/


小提琴2:引导文档中描述的模态的副本,但结合了必要的元件,以避免使用任何的JavaScript。 尤其要注意列入的hide阶级#myModal DIV,并使用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>​

另外值得一提的是,您所使用的网站上引导2.0上运行,而官方Twitter的引导网站是2.0.3。



Answer 2:

我终于找到了这个解决方案从“斯文”,并解决了这个问题。 我所做的就是我列入“bootstrap.min.js”有:

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

代替:

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

并固定其看上去非常奇怪的问题。 任何人都可以解释,为什么?



Answer 3:

也看看BootBox,这是非常简单的显示提醒和自举模式确认框。 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:

我曾与情态动词也是一个问题。 我应该有bootstrap.min.js之前申报jquery.min.js(在我的布局页)。 从官方网站:“所有的插件依赖jQuery的(这意味着必须的jQuery插件文件之前被包含)”



Answer 5:

我碰到这个问题了。 我是包括bootstrap.js和引导,modal.js。 如果你已经有了bootstrap.js,你并不需要包括酥料饼。



Answer 6:

对我来说,引导模式进行显示并消失当我点击该按钮标记(标记模态显示和隐藏使用数据本身的属性)。 在我gulpfile.js我添加了bootstrap.js(其中有模态逻辑)和modal.js文件。 所以我认为浏览器解析并执行这两个文件,二是点击事件处理程序连接到特定的DOM元素(每个文件)后,这样一个显示模式的其他隐藏模式。 希望这可以帮助别人。



Answer 7:

尝试跳过p标签或与H3标签或类似的更换。 更换:

<p>One fine body…</p>

<h3>One fine body…</h3>

它的工作对我来说,我不知道为什么,但似乎p标签是有点不引导的一些版本完全兼容。



Answer 8:

更好的解决方案是加载bootstrap.js的扭曲版本,而不jquery的。 得到它http://daniemon.com/blog/bootstrap-without-jquery/

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

去这样会节省你的script标签的麻烦。



Answer 9:

也,

如果你正在运行从Visual Studio您的网页,并已安装你需要确保两件事引导包

  1. 那你也已经得到了Bootsrap模态对话框封装(非常重要)
  2. 你已加入它,如果你正在使用捆绑到bundle.config。


Answer 10:

我采用了棱角分明CLI有同样的问题。 我需要导入bootstrap.js.min文件中的.angular-cli.json文件:

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


Answer 11:

使用模态的一种简单方法是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!'); 


Answer 12:

你必须打电话给你引导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>


文章来源: Can not get a simple bootstrap modal to work