Модальные тени 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>
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
0
3 662
2

Ответы 2

Теперь у меня есть решение. 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>.

Другие вопросы по теме