Bootstrap Modal 保留隐藏空间答案

【问题标题】：Bootstrap Modal preserves space on hidingBootstrap Modal 保留隐藏空间
【发布时间】：2020-04-10 23:31:11
【问题描述】：

我正在使用引导程序 3。

我的页面中有多个模式。我正在使用以下代码隐藏模式：

$('.modal-1').modal('hide');

它隐藏了模态但一些模态的属性没有更新。因此，我无法单击页面中的任何位置。例如：aria-modal="true" 在隐藏模式时不会更新为 aria-hidden="true"。和类 show 在打开时分配给模态，当模态隐藏时不会自行删除。

我发现了类似的问题并尝试使用以下代码解决：

$(".modal-backdrop").remove();
$('.modal-1').removeClass('show');

但它不起作用。

有人遇到过类似的问题吗？请指导。

编辑：

HTML

 <div class="modal fade modal-1" tabindex="-1" role="dialog" aria-labelledby="ModalLabel">
          <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
              <div class="modal-header">
                <button type="button" class="close" id="closeModal" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
              </div>
              <div class="modal-body">
                 /*** My content ***/
              </div>
            </div>
        </div>
</div>

【问题讨论】：

你能给我们看看你的html和js代码吗？
@Utkarsh 我添加了 HTML 部分。我已经发布了相关的JS代码。我打电话给 $('.modal-1').modal('hide');按钮点击的这条线在模式内

标签： jquery bootstrap-modal

【解决方案1】：

你可以试试这个：

$(document.body).removeClass("modal-open");
$(".modal-backdrop").remove();
$('.modal-1').modal('hide');

【讨论】：

【解决方案2】：

我不相信你需要这个

$('.modal-1').modal('hide');

data-dismiss 应该处理您需要的所有内容

【讨论】：

data-dismiss 对我不起作用，因为在我的 ajax 调用得到响应后我必须隐藏它

【解决方案3】：

我认为您需要为您的模态弹出窗口提供一个 id，然后尝试隐藏它：

$("#Modal").attr("aria-hidden", "true");
$("#Modal").modal('hide');

【讨论】：