twitter-bootstrap Bootstrap 4 .modal('hide') 不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48662549/
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 4 .modal('hide') not working
提问by Giesburts
I am creating a really simple, but a bit tweaked, modal for showing an iFrame. I open the model by a javascript function and the modal call function provided by bootstrap. In my modal I've placed an icon for closing the modal. If I click on this close icon the modal won't hide. I use a javascript onclick with the .modal('show')and .modal('hide')functions provided by bootstrap. The modal doesn't hide, but my console log is fired.
我正在创建一个非常简单但稍作调整的模式来显示 iFrame。我通过javascript函数和bootstrap提供的模态调用函数打开模型。在我的模态中，我放置了一个用于关闭模态的图标。如果我点击这个关闭图标，模式将不会隐藏。我使用 javascript onclick.modal('show')和.modal('hide')bootstrap 提供的函数。模态不会隐藏，但我的控制台日志被触发。
I know there are many questions out there with a similiar problem but these questions did not contain the answer I was looking for. I know that css in html is just not right, but I was doing some fast prototyping so please forgive me for that.
我知道有很多类似问题的问题，但这些问题不包含我正在寻找的答案。我知道 html 中的 css 是不对的，但我正在做一些快速原型设计，所以请原谅我。
Code
代码
Open link for modal
打开模态链接
<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>
The modal html
模态html
<!-- Modal -->
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">
<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" onClick="closeModal()"></i>
<div class="body-modal" style="max-width: 90%; margin: 0 auto; overflow: scroll;">
<div id="clip" style="overflow:scroll;">
<iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
</div>
</div>
</div>
The JS
JS
function openFeedback(link) {
$('#iframe_feedback').modal('show');
console.log(link);
};
function closeModal() {
$("#iframe_feedback").modal('hide');
console.log('Close fired');
};
My main problem is that my modal is showing up, also fires the console.logfor both show and hide but after clicking on the close button the modal doesn't hide.
我的主要问题是我的模态出现了，同时也触发了console.log显示和隐藏，但在点击关闭按钮后，模态不会隐藏。
采纳答案by Klooven
TLDR;
TLDR；
It seems like you need the modal-dialogdiv inside your modal for .modal('hide')or data-dismiss="modal"to work.
似乎您需要modal-dialog模态中的div才能工作.modal('hide')或data-dismiss="modal"工作。
--
——
I got your problem fixed by changing the body-modalclass to modal-dialog. (and changed your close icon to red so that it can be seen easier in the snippet)
我通过将body-modal类更改为modal-dialog. （并将关闭图标更改为红色，以便在代码段中更容易看到）
function openFeedback(link) {
$('#iframe_feedback').modal('show');
console.log(link);
};
function closeModal() {
$("#iframe_feedback").modal('hide');
console.log('Close fired');
};<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.bundle.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet"/>
<a href="#" onClick="openFeedback('getBootstrap')">Klik hier om de website te bekijken</a>
<div class="modal fade" id="iframe_feedback" style="padding-top: 20px;">
<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: red; top: 40px; cursor: pointer; z-index: 1700;" onClick="closeModal()">close</i>
<div class="modal-dialog" style="max-width: 90%; margin: 0 auto; overflow: scroll;">
<div id="clip" style="overflow:scroll;">
<iframe src="/dashboard" style=" width:2600px; height: 1600px;"></iframe>
</div>
</div>
</div>But now the modal is bit messy (visually).
但是现在模态有点乱（在视觉上）。
I'd recommend that you check the modal docs. With the included features in Bootstrap 4 you would probably strip off most of your extra (inline) CSS and JS, and in this way ensure that your everything works well in the most of browsers.
我建议您检查模态文档。使用 Bootstrap 4 中包含的功能，您可能会去除大部分额外的（内联）CSS 和 JS，并以这种方式确保您的一切都在大多数浏览器中运行良好。
回答by Joel García
If you remove the fadeclass it works fine.
如果您删除fade该类，它可以正常工作。
I think that you need a modal-dialogdiv if you intent to use the fadeclass. Also, use just one type of closing/opening modals, either the js way or the data-toggle/data-dismiss.
modal-dialog如果您打算使用fade该类，我认为您需要一个div 。此外，只使用一种类型的关闭/打开模式，无论是 js 方式还是data-toggle/data-dismiss.
回答by Manpreet
You can use data-dismiss="modal" for close the modal
您可以使用 data-dismiss="modal" 关闭模态
<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" data-dismiss="modal" ></i>
<i class="ion-close-round close-modal" style="position: fixed; right: 40px; font-size: 32px; color: white; top: 40px; cursor: pointer;" data-dismiss="modal" ></i>
