如何删除bootstrap模态覆盖？

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>

请参阅模态选项

Answer 2

通过在shown.bs.modal触发事件时重新隐藏模态,我能够使用以下代码段隐藏模型叠加层.

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

Answer 3

你也可以设置

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

在您的 css 和 bootstrap 中，单击外部功能仍然有效。

Answer 4

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

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

Answer 5

如果您从 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 6

背景使用以下类触发：.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;
}