Bootstrap 引导模态阴影显示在模态上

ivqmmu1c 于 2023-05-15 发布在 Bootstrap

关注(0)|答案(3)|浏览(237)

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

<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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/53060158/bootstrap-modal-shadow-displays-on-modal

3条答案

按热度按时间

chhqkbe11#

我现在有办法了。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>

这解决了我的问题

赞(0）回复(0）举报 2023-05-15

vvppvyoh2#

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

赞(0）回复(0）举报 2023-05-15

q5iwbnjs3#

太好了，这对我来说很有用...

赞(0）回复(0）举报 2023-05-15