我试图让一个简单的引导的模式样本的工作,我按照这个文件它说:“你可以激活你的页面上模态容易,而无需编写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您的网页,并已安装你需要确保两件事引导包
- 那你也已经得到了Bootsrap模态对话框封装(非常重要)
- 你已加入它,如果你正在使用捆绑到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上 :
- 链接到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:
你必须打电话给你引导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">×</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