如何删除引导模式覆盖？答案

【问题标题】：How to remove bootstrap modal overlay?如何删除引导模式覆盖？
【发布时间】：2015-09-08 13:37:48
【问题描述】：

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

【问题讨论】：

根据什么标准删除？你能显示一些代码吗？

【解决方案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

【讨论】：

【解决方案2】：

当shown.bs.modal 事件被触发时，我可以使用以下 sn-p 来隐藏模型叠加层。

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

【讨论】：

【解决方案3】：

你也可以设置

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

在您的 css 和引导程序中单击外部功能仍然有效。

【讨论】：

绝对精彩。！简单又甜美。直截了当，没有任何模糊。

【解决方案4】：

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

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

【讨论】：

【解决方案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>

【讨论】：

【解决方案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;
}

【讨论】：

@Manigandaprabhu: #modal-id .modal-backdrop { ... }
在给定的示例中，将 opacity: .5; 更改为 opacity: .0;

【解决方案7】：

如果您在 javascript (jquery) 中使用函数 click。你使用：

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

【讨论】：

【解决方案8】：

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

这应该是一种魅力

【讨论】：

【解决方案9】：

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

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

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

$("模态背景").remove();

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

【讨论】：

【解决方案10】：

  <script>
    $(document).ready(function(){
  $("button").click(function(){
    $("div").removeClass("modal-backdrop");
  });
});
    </script>

【讨论】：

这并没有提供问题的答案。一旦你有足够的reputation，你就可以comment on any post；相反，provide answers that don't require clarification from the asker。 - From Review

【解决方案11】：

您可以使用 backdropClass，这是一个自定义类来附加到模态背景 (api)。

TS

this.modalService.open(MyModalComponent, {
      backdrop: 'static',
      keyboard: false,
      backdropClass: 'no-backdrop'
});

CSS（全局样式）

.no-backdrop {
  background: transparent;
}

【讨论】：