Question

如何删除特定模态的bootstrap模态覆盖。当模态出现时，背景具有黑色并具有一些不透明度是否有任何删除元素的选项......

Answer 1

将data-backdrop="false"选项作为属性添加到打开模态的按钮。

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal" data-backdrop="false">
  Launch demo modal
</button>

请参阅modal options

Answer 2

我可以使用以下代码段隐藏模型叠加层，只需在触发shown.bs.modal事件时重新隐藏模态。

<script type="text/javascript">
  $('#modal-id').on('shown.bs.modal', function () {
      $(".modal-backdrop.in").hide();
   })
</script>

Answer 3

如果您从javascript触发模式，也可以通过以下方式执行此操作，将 data-backdrop =“ false” 直接添加到模式中。

 <div class="modal fade" id="notifyModal" data-backdrop="false"
tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content" id="info_content">
            A Project has been deleted successfully!
        </div>
    </div>
</div>

Answer 4

如果您通过jquery处理引导程序模式，那么最好在事件回调函数中使用以下代码。

$('.modal-backdrop').remove();

Answer 5

使用以下课程触发后台：.modal-backdrop并为不透明度添加了.in课程。

默认值（根据需要进行编辑）：

.modal-backdrop {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 1040;
    background-color: #000;
}
.modal-backdrop.in {
    filter: alpha(opacity=50);
    opacity: .5;
}

Answer 6

您也可以设置

.modal-backdrop {
   background-color: transparent;
}

在你的css和bootstrap中点击外部功能仍然有效。

Answer 7

如果您在JavaScript（jquery）中使用函数click。您使用的是：

$("#myBtn2").click(function(){
    $("#myModal2").modal({backdrop: false});
});

Answer 8

$("#myModal").on('hide.bs.modal', function(){
    $('.modal-backdrop').remove()
});

这应该是一种魅力

Answer 9

这对我有用。你可以试试这个。

$('.close').click();

$(document.body).removeClass("modal-open");

$("modal-backdrop").remove();

https://github.com/valor-software/ngx-bootstrap/issues/853

如何删除bootstrap模态覆盖？

9 个答案: