引导模式弹出窗口不关闭

Question

我在使用引导模式弹出窗口时遇到问题。 调用弹出窗口没有问题，但尝试关闭它会产生奇怪的结果。 不是仅仅隐藏弹出窗口和删除背景，弹出窗口被隐藏但添加了另一个背景，使屏幕几乎变黑。 原始背景不会被删除。

以下是我尝试使用的 html 代码

<div id="popupDelete" class="modal hide fade" role="dialog">
    <div class="modal-header">delete transaction line?</div>
    <div class="moda-body">
        <button id="deleteYes">yes</button>
        <button class="cancelButton" data-dismiss="modal">no</button>
    </div>
</div>

这是我从 bootstrap 2.3 文档中得到的，并且应该像 bootstrap 中的其他所有内容一样在 teh bix 中工作。

我还尝试将 javascript 与$('#popupDelete').modal('hide');一起使用 function，效果一样。

Answer 1

这个为我工作

$('#popupDelete').modal('toggle');

Answer 2

我不确定这是否是造成问题的原因，但是有错字。 它的

<div class="modal-body">

在第3行中。缺少“ l”

Answer 3

确实有JavaScript与弹出窗口的关闭冲突。 单击父容器时，有一排javascript将所有弹出窗口弄乱了，迫使它们再次打开。

Answer 4

@dreagan，可能会发生这样的情况，例如，当您单击打开按钮时，弹出窗口是动态创建的，因此您可能需要关闭尝试一下：

$('#popupDelete').close()

要么

$.modal.close();

请参阅此内容。 如何关闭jQuery Simplemodal？

Answer 5

尽可能将模式HTML放在顶层位置，以避免其他元素的潜在干扰。 将.modal嵌套在另一个固定元素中时，您可能会遇到问题。

Answer 6

动态创建模态的方法（Bootstrap 5）：

Html：

...
<button type="button" class="close" data-dismiss="modal" aria-label="Close" onclick="close_modal();">
<span aria-hidden="true">&times;</span>
</button>
...

Javascript：

var my_modal = new bootstrap.Modal(document.getElementById('my_modal'), {
    keyboard: false
})

// To open
function open_modal () {
    my_modal.open();
}

// To close
function close_modal ()
{
   my_modal.hide();
}

Answer 7

 <script> $('#submit').click( function () { $('#myModal').modal('hide'); }); </script>