Ситуация: есть сайт на wordpress. Страницы редактируются с использованием плагина Elementor.
На страницу добавлен элемент shortcode, в который вписан шорткод самописного плагина. Таким образом, вместо шорткода на страницу вставляется некоторое содержимое.
Содержимое содержит модальное окно. при нажатии на определенную кнопку на странице, оно должно появляться в центре
экрана, а все на фоне - затеняться.
Модальное окно сделано по схеме:
<div class="modal">
<div class="modal-content">
*тут контент*
</div>
</div>
Со стилями:
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
/* width: 60%;*/
border-radius: 10px;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
position: absolute;
left: 50%;
top: 40%;
transform: translate(-50%, -50%);
}
Логика появления окна и работы с ним настроена. Но есть проблема: в chrome и edge окно появляется не по центру
экрана, а по центру
страницы и чтобы его увидеть - приходится скроллить вниз.
При этом, в Mozilla Firefox все отображается именно так, как надо.
Смена position: absolute на position: fixed в .modal-content искомого результата не дала. Смена height на 100vh в .modal привела к тому, что окно и затенение появлялось сверху, но при скролле вниз - оставалось там же и можно было отскроллить к месту, где затенене пропадало.
Elementor добавляет к своим элементам стопку обвязок-wrapper'ов, один из которых, видимо, ломает логику работы position: fixed в chrome. Такое предположение в связи с тем, что на чистой странице без WP и Elementor та же верстка отображается корректно везде.
Можно ли как-то заставить окошко быть по центру
экрана во всех браузерах несмотря на эти обвязки(не хотелось бы вклиниваться и менять в них что-то т.к. в остальном все работает корректно). С поощью CSS или JavaScript(только бы не ело вычислительный ресурс клиента при этом нещадно)?
