Question

我面临一个非常愚蠢的问题，这让我太烦人了我有一个bootstrap模式弹出窗口，当我点击页面上的添加按钮时会打开它。

当我第一次打开它时效果很好但是当我关闭它并重新打开（没有刷新页面）时，模式上的按钮如保存，重置不会不行。

我尝试了以下代码。这样可以完美地关闭模态弹出窗口，但按钮不起作用。

jQuery('[data-dismiss="modal"]').on('click', function(){
    jQuery('.modal').hide();
    jQuery('.modal-backdrop').hide();
});

如果我刷新页面并打开模态弹出窗口，那么它将像魅力一样工作，如果我再次关闭并重新打开则不起作用。

有人可以帮助我摆脱这种情况。

注意： - 我在模态中没有任何模态。它只是一个导致问题的弹出窗口。

我在保存按钮下使用以下代码。

$("#btnSave").die("click").bind("click", function() {
    //calling ajax to save
});

Answer 1

要关闭您应该使用jQuery('.modal').modal('hide');而不是jQuery('.modal').hide();

的模式

所以你的最终代码看起来像

jQuery('[data-dismiss="modal"]').on('click', function(){
    jQuery('.modal').modal('hide');
});

Answer 2

在代码中花了很多时间之后，我通过用remove替换hide来解决它。

jQuery('[data-dismiss="modal"]').on('click', function() {
     jQuery('.modal-backdrop').remove();
     jQuery('.modal').remove();
});

现在工作正常。感谢所有人关注我的问题并提出他们的建议和答案。

Answer 3

这里晚了很多年，但我一直在寻找 Bootstrap v5 中类似问题的解决方案。当页面加载时，我在全局 javascript 变量中创建并存储了一个引导模式 div； “hide()”调用第一次运行良好，但在后续调用中失败。

我在加载的 dom 内容上执行此操作：

document.addEventListener("DOMContentLoaded", function (event) {
    namespace.my_global_modal = new bootstrap.Modal(document.getElementById('loadingmodaldiv'),
    {
        keyboard: false,
        backdrop: "static"
    });
 });

然后根据需要打开和关闭模态：

namespace.my_global_modal.show();

一直有效。但是

namespace.my_global_modal.hide();

仅在第一次调用时有效，在后续调用中失败。

解决方案是从模态标记中删除类“淡入淡出”。我改变了这个：

<div class="modal fade" tabindex="-1" id=loadingmodaldiv">

为此：

<div class="modal" tabindex="-1" id="loadingmodaldiv">

“fade”类添加了模态淡出和淡入的视觉效果，所以如果视觉效果很重要，这个解决方案显然没有用。

为什么Bootstrap Modal上的按钮第二次无效？

3 个答案: