如何删除引导模式覆盖?

问题描述 投票:0回答:14

如何删除特定模态的引导程序模态覆盖。 当模态出现时背景有黑色和一些不透明度 是否有删除该元素的选项...

twitter-bootstrap bootstrap-modal
14个回答
51
投票

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>

模态选项


14
投票

您还可以设置

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

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


12
投票

我能够使用以下代码片段通过在触发

shown.bs.modal
事件时重新隐藏模态来隐藏模型覆盖。

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

10
投票

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

7
投票

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

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

3
投票

如果您在 javascript (jquery) 中使用函数

click
。你使用:

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

2
投票

背景由以下类别触发:

.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;
}

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

这应该是一种魅力


0
投票

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

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

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

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

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


0
投票

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

0
投票

您可以使用

backdropClass
,一个自定义类附加到模态背景(api)

TS

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

CSS(全局样式)

.no-backdrop {
  background: transparent;
}

0
投票

我遇到了这个问题,我通过删除带有类模态背景的 div 解决了这个问题。 在ajax成功之后。

$.ajax({
         url: 'Your/URL',
         type: 'POST',
         data: formData, // Instance of FormData()
         contentType: false,
         processData: false,
         headers: {
             'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                   },
         success: function(response) {
              $('.modal-backdrop').remove()
              // Your code here, what you wanna do after the success of your ajax call
                  },
         error: function() {
               console.log('error');
                   },
         complete: function() {
                console.log('complete');
                   }
        })

我正在使用:Bootstrap“版本”:“4.0.5”。


0
投票

我遇到了同样的问题,发现 ii 我只是使用 javascript 来显示和隐藏模态形式,并从调用模态的按钮中删除数据目标属性,一切正常。无需删除数据背景和所有这些东西。


0
投票

data-bs-backdrop="false"
添加到模态属性而不是触发模态的按钮。

https://getbootstrap.com/docs/4.0/components/modal/

© www.soinside.com 2019 - 2024. All rights reserved.