Bootstrap 模态阴影显示在模态上答案

【问题标题】：Bootstrap modal shadow displays on modalBootstrap 模态阴影显示在模态上
【发布时间】：2019-03-07 20:05:04
【问题描述】：

我的网页上有一个引导模式，但每次打开模式时，它都会在其阴影下方打开，我该如何解决这个问题？

<div id="logoutModal" bsModal #myModal="bs-modal" class="modal" 
tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria- 
hidden="true" >
    <div class="modal-dialog modal-lg modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">Sign Out</h4>
                <button type="button" class="close" data-dismiss="modal" 
aria-hidden="true" aria-label="Close">×</button>
            </div>
            <div class="modal-body">
                <p><i class="fa fa-question-circle"></i> Are you sure you 
want to sign out? <br /></p>
            </div>
            <div class="modal-footer text-center">
                    <button class="btn btn-default btn-primary" data- 
dismiss="modal" (click)="confirmSignOut()">Sign out</button>
                    <button class="btn btn-default" data- 
dismiss="modal">Cancel</button>
            </div>
        </div>
    </div>
</div>

【问题讨论】：

标签： html css twitter-bootstrap bootstrap-modal

【解决方案1】：

我现在有解决方案。 1.在我的自定义css文件中

.modal-backdrop {
  //hides the default modal shadow
  display: none;
}

.modal {
  //modal custom bachground/shadow
  background: rgba(0,0,0,0.5);
}

or

.modal{
  background-color: rgba(0, 0, 0, 0.3);
}
.modal-backdrop{
  position: relative;
}

2。我写我的模态html标签如下。

 <div id="logoutModal" bsModal #myModal="bs-modal" class="modal" 
    tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria- 
    hidden="true" data-backdrop="false" style="background: 
    rgba(0,0,0,0.5);">
    ....
</div>

这解决了我的问题。

【讨论】：

【解决方案2】：

当模态不是<body> 的直接子级时，可能会发生这种情况。

【讨论】：