У меня есть модальное окно начальной загрузки на моей веб-странице, но каждый раз, когда я открываю модальное окно, оно открывается под его тенями, как я могу решить эту проблему?
<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>
.