Javascript 无法让简单的引导模式工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10560630/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Can not get a simple bootstrap modal to work
提问by cnherald
I am trying to get a simple bootstrap's modal sample to work, I follow this documentwhich says " You can activate modals on your page easily without having to write a single line of javascript. Just give an element a data-controls-modal attribute which corresponds to a modal element id, ...", but I have done whatever I could and had a huge amount of research still can not get this simple modal to work.
我试图让一个简单的引导程序的模态示例工作，我按照这个文档说“你可以轻松地在你的页面上激活模态，而无需编写一行 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…</p>
</div>
<div class="modal-footer">
<a href="#" class="btn">Close</a>
<a href="#" class="btn btn-primary">Save changes</a>
</div>
</div>
I have either this:
我有这样的：
<a class="btn" data-controls-modal="myModal">Launch Modal</a>
or this:
或这个：
<a class="btn" data-toggle="modal" href="#myModal" >Launch Modal</a>
button to activate the modal, I have loaded the bootstrap-modal.js on the page as well. Unless I added a javascript line to handle the "Launch Modal" click event, when I click on "Launch Modal", nothing happens at all, are there anything that I have missed?
按钮来激活模态，我也在页面上加载了 bootstrap-modal.js。除非我添加了一个 javascript 行来处理“Launch Modal”点击事件，否则当我点击“Launch Modal”时，什么也没有发生，有什么我遗漏的吗？
采纳答案by cnherald
I finally found this solutionfrom "Sven" and solved the problem. what I did was I included "bootstrap.min.js" with:
我终于从“Sven”找到了这个解决方案并解决了这个问题。我所做的是将“bootstrap.min.js”包含在：
<script src="bootstrap.min.js"/>
instead of:
代替：
<script src="bootstrap.min.js"></script>
and it fixed the problem which looked really odd. can anyone explain why?
它解决了看起来很奇怪的问题。谁能解释为什么？
回答by mg1075
Fiddle 1: a replica of the modal used on the twitter bootstrap site. (This is the modal that doesn't display by default, but that launches when you click on the demo button.)
Fiddle 1：twitter bootstrap 站点上使用的模态的副本。（这是默认情况下不显示的模式，但当您单击演示按钮时会启动。）
Fiddle 2: a replica of the modal described in the bootstrap documentation,
but that incorporates the necessary elements to avoid the use of any javascript.
Note especially the inclusion of the hideclass on #myModaldiv, and the use of data-dismiss="modal"on the Close button.
Fiddle 2：bootstrap 文档中描述的模态的副本，但它包含了避免使用任何 javascript 的必要元素。请特别注意hide在#myModaldiv上包含的类，以及data-dismiss="modal"在关闭按钮上的使用。
<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>?
It's also worth noting that the site you are using is running on bootstrap 2.0, while the official twitter bootstrap siteis on 2.0.3.
还值得注意的是，您正在使用的站点在 bootstrap 2.0 上运行，而官方 twitter bootstrap 站点在 2.0.3 上运行。
回答by Nick N.
Also have a look at BootBox, it's really simple to show alerts and confirm boxes in a bootstrap modal. http://bootboxjs.com/
还可以看看 BootBox，在引导模式中显示警报和确认框非常简单。http://bootboxjs.com/
The implementation is as easy as this:
实现就像这样简单：
Normal alert:
正常警报：
bootbox.alert("Hello world!");
Confirm:
确认：
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>");
}
});
And even custom:
甚至定制：
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..."
}]);
回答by Anton Petrovskyi
I had an issue with Modals as well. I should have declare jquery.min.jsbefore bootstrap.min.js(in my layout page). From official site : "all plugins depend on jQuery (this means jQuery must be included beforethe plugin files)"
我也遇到了 Modals 的问题。我应该在bootstrap.min.js之前声明jquery.min.js（在我的布局页面中）。来自官方网站：“所有插件都依赖于 jQuery（这意味着必须在插件文件之前包含 jQuery ）”
回答by Tulio F.
I run into this issue too. I was including bootstrap.js AND bootstrap-modal.js. If you already have bootstrap.js, you don't need to include popover.
我也遇到了这个问题。我包括 bootstrap.js 和 bootstrap-modal.js。如果您已经有了 bootstrap.js，则不需要包含 popover。
回答by agent47
For me the bootstrap modal was showing and disappearing when I clicked the button tag (in the markup the modal is shown and hidden using data attributes alone). In my gulpfile.js I added the bootstrap.js (which had the modal logic) and the modal.js file. So I think after the browser parses and executes both the files, two click event handlers are attached to the particular dom element (one for each of the files), so one shows the modal the other hides the modal. Hope this helps someone.
对我来说，当我单击按钮标签时，引导模式显示和消失（在标记中，模式显示和隐藏仅使用数据属性）。在我的 gulpfile.js 中，我添加了 bootstrap.js（具有模态逻辑）和 modal.js 文件。所以我认为在浏览器解析并执行这两个文件之后，两个点击事件处理程序被附加到特定的 dom 元素（每个文件一个），所以一个显示模态，另一个隐藏模态。希望这可以帮助某人。
回答by Long
A better solution is to load a twisted version of bootstrap.js without jquery. Get it from http://daniemon.com/blog/bootstrap-without-jquery/
更好的解决方案是在没有 jquery 的情况下加载 bootstrap.js 的扭曲版本。从http://daniemon.com/blog/bootstrap-without-jquery/ 获取
<script src=".../bootstrap-without-jquery.min.js"></script>
Going this way will save you trouble from script tags.
这样做可以省去脚本标签的麻烦。
回答by Flea
I was having this same problem using Angular CLI. I needed to import the bootstrap.js.minfile in the .angular-cli.jsonfile:
我在使用 Angular CLI 时遇到了同样的问题。我需要bootstrap.js.min在.angular-cli.json文件中导入文件：
"scripts": ["../node_modules/jquery/dist/jquery.min.js",
"../node_modules/bootstrap/dist/js/bootstrap.min.js"],
回答by Daniel
Try skipping the p tag or replace it with a h3 tag or similar. Replace:
尝试跳过 p 标签或将其替换为 h3 标签或类似标签。代替：
<p>One fine body…</p>
<p>One fine body…</p>
with
和
<h3>One fine body…</h3>
<h3>One fine body…</h3>
It worked for me, I don't know why, but it seems the p tag is somehow not fully compatible with some versions of Bootstrap.
它对我有用，我不知道为什么，但似乎 p 标签与某些版本的 Bootstrap 不完全兼容。
回答by John Swaringen
Also,
还，
If you're running your page from Visual Studio and have installed the bootstrap package you need to make sure of two things
如果您从 Visual Studio 运行页面并安装了引导程序包，则需要确保两件事
- That you've also gotten the Bootsrap Modal Dialog package (very important)
- You've added it to bundle.config if you're using bundling.
- 您还获得了 Bootsrap Modal Dialog 包（非常重要）
- 如果您使用捆绑，则已将其添加到 bundle.config 中。
