Модальное окно, показывающее в разделе, когда оно должно отображаться во всем окне [закрыто] ⇐ CSS

[Anonymous]

проблема:
Как видно на изображении
Темная часть модального окна охватывает только сервисы.
Результат:
Мне нужно, чтобы оно покрыло все окно, похожее на изображение ниже.
edit:
Я знаю, что HTML, JS CSS -код может быть проверен на JSFiddle, но я не знаю, как воссоздать эту точную проблему со многими DEV, как я пытался, но потерпел неудачу. В то время как я попробую еще раз, если у вас уже есть какая -то идея, пожалуйста, пропустите некоторые изменения, чтобы внести в себя для достижения result
, если я могу спросить , Как работает код. то есть, ограничен ли модальный диалог div, который его называют или ограничены CSS, который его делает? < /p>
Контекст: < /strong>
В Jekyll, index.html -> home.html -> base.html -> body -wrapper.html -> (buy.html, sellow.html, leasing.html и т. Д.) < /p>
body-wrapper.html
.
.

.
.





{% include buying.html %}

{% include selling.html %}

.
.




Services






buying.html




Buying


First, I will help you obtain a pre-approval document from a reliable, re....sive l...w ...click here






{% include modal.html modal-name='buyModal' modal-data='This is a simple modal popup example in Jekyll' %}

modal.html




×
Modal Header
{{ include.modal-data }}



модал-videos.css
/* Modal styles */

/* Modal background */
.modal {
display: none; /* Hidden by default */
position: fixed;
z-index: 9990 !important; /* Sit on top */
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
animation: fadeIn 0.5s;
}

/* Modal Content */
.modal-content {
background: white !important; /* Ensures modal is white */
z-index: 9999 !important; /* Sit on top */
border-radius: 8px;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 600px;
animation: slideIn 0.5s;
}

/* Close button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}

.close:hover,
close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}

/* Fade in animation */
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}

/* Slide in animation */
@keyframes slideIn {
from {
transform: translateY(-50px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}

модал-Videos.js
// Open modal functionality
document.querySelectorAll('.open-modal').forEach((button) => {
button.addEventListener('click', (event) => {
event.preventDefault(); // Prevent default link behavior
const modalId = button.getAttribute('data-modal');
const modal = document.getElementById(modalId);
modal.style.display = 'block';
});
});

// Close modal functionality
document.querySelectorAll('.close').forEach((button) => {
button.addEventListener('click', () => {
const modalId = button.getAttribute('data-modal');
const modal = document.getElementById(modalId);
modal.style.display = 'none';
});
});

// Close modal when clicking outside of it
window.addEventListener('click', (event) => {
document.querySelectorAll('.modal').forEach((modal) => {
if (event.target === modal) {
modal.style.display = 'none';
}
});
});


Подробнее здесь: https://stackoverflow.com/questions/794 ... ire-window