我的网页上有一个bootstrap模式，但每次打开模态时，它都会在阴影下方打开，我该如何解决？
<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>
我现在有解决方案。 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>
这解决了我的问题。
当模态不是<body>的直接子项时，可能会发生这种情况。