Javascript Bootstrap 模式 - 屏幕变黑
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/30910569/
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
Bootstrap modal - screen goes black
提问by Mefhisto1
I have two modals, they pop up on button click. One works fine, however for the second one, the screen just goes black and nothing happens:
我有两个模态，它们会在单击按钮时弹出。一个工作正常，但是对于第二个，屏幕变黑，没有任何反应：
First, working modal:
一、工作模态：
<div id="deleteConfirmation" class="hidden, modal fade">
<div class="modal-dialog">
<div class="modal-content">
<h5>Are you sure you want to delete this contact?</h5>
<button id="deleteOk">
Yes
</button>
<button id="deleteNo">
No
</button>
</div>
</div>
</div>
and pops up on this command:
并弹出此命令：
$('#deleteConfirmation').modal('show');
Second one, is almost identical, but not working:
第二个，几乎相同，但不起作用：
<div id="addContact" class="hidden, modal fade">
<div class="modal-header">
<h5>Add New Contact</h5>
</div>
<div class="modal-dialog">
<div class="modal-content">
<label>First Name </label><input /> <br />
<label>Last Name </label><input /> <br />
<label>Address </label><input /> <br />
<label>Phone Number </label><input /> <br />
<button id="addConfirm">
Confirm
</button>
</div>
</div>
</div>
And the command:
和命令：
$('#addContact').modal('show');
It's basically two identical modals, however for the second one, screen just goes black, and the first modal works correctly. I assume it's one of the classes that I'm using. What seems to be off here?
它基本上是两个相同的模态，但是对于第二个，屏幕变黑，第一个模态正常工作。我假设它是我正在使用的类之一。这里好像出了什么问题？
采纳答案by Vitor Mateus
I created some modals at bootply and adapted your code, check out if this is of any help.
我在 bootply 上创建了一些模态并调整了你的代码，看看这是否有帮助。
回答by Praveen Kumar Purushothaman
You have a typo here:
你这里有一个错字：
<div id="deleteConfirmation" class="hidden, modal fade">
<div id="addContact" class="hidden, modal fade">
Remove the commas:
去掉逗号：
<div id="deleteConfirmation" class="hidden modal fade">
<div id="addContact" class="hidden modal fade">
So the script is unable to determine whether the hiddenclass is correctly applied or not, and ultimately you won't see anything other than a blackscreen of death! :O
因此脚本无法确定hidden该类是否正确应用，最终除了黑屏死机之外看不到任何东西！:O
回答by Chukwuemeka Ihedoro
I think the real thing to do here is to remove the hidden class in your div tags by changing this:
我认为这里真正要做的是通过更改以下内容来删除 div 标签中的隐藏类：
<div id="deleteConfirmation" class="hidden modal fade">
<div id="addContact" class="hidden modal fade">
to this
对此
<div id="deleteConfirmation" class="modal fade">
<div id="addContact" class="modal fade">
if you go through the bootstrap doc you wont see where a hidden class was added: http://getbootstrap.com/javascript/#modals
如果您浏览引导程序文档，您将看不到添加了隐藏类的位置：http: //getbootstrap.com/javascript/#modals
