Модал перекрывает контент и делает его не кликаемым в bootstrap? - PullRequest
Новая
       6

Модал перекрывает контент и делает его не кликаемым в bootstrap?

0 голосов
/ 11 марта 2020

Я сделал модал, который отображается в нижнем колонтитуле, но когда модал появляется, он перекрывает общий div и делает боковую панель неактивной.

Вот код: 

<footer>     
<div class="modal custom show" id="trackModal"  role="dialog" aria-labelledby="trackModalLabel" aria-hidden="false">
                 <div class="modal-dialog" id="popup">
                     <div class="modal-content">
                          <img id="popclose" src="~/Content/MediaCenter/assets/images/cookies.jpg">
                     </div>
                  </div>
        </div>
<footer>

Вот css

div#popup {
    left: 18%;
}
div#trackModal {
    z-index: 1049;
}

.modal.custom .modal-dialog {
    position: fixed;
    bottom: 0;
    right: 0;
    margin: 0;
    content: "";
    width: 130%;
    display: none;
}

Я пробовал visibility:hidden; overflow-x:auto и overflow-y:auto. Но результат остается прежним.

Пожалуйста, если кто-нибудь может помочь?

1 Ответ

1 голос
/ 11 марта 2020

Используйте свойство Z-index для модели следующим образом: 

   .modal.custom .modal-dialog {
        position: fixed;
        bottom: 0;
        right: 0;
        margin: 0;
        content: "";
        width: 130%;
        display: none;
        z-index: -1; 
    }

, поэтому теперь боковая панель будет идти впереди вашей модели. Попробуй это.

...