Modal -Fenster in einem Abschnitt, wenn es auf dem gesamten Fenster angezeigt werden sollte [geschlossen] ⇐ HTML

[Anonymous]

Ausgabe:
Wie in Bild
Der dunkle Teil des Modalfensters deckt nur Dienste ab. >
Ich brauche, dass es das gesamte Fenster wie das Bild unten abdeckt.
Neuestes Update
In CSS verändert < /p>

Code: Select all

  width: 100%;
height: 100%;
< /code>
zu < /p>
  width: 100vw; /* Full viewport width */
height: 100vh; /* Full viewport height */

und dies ergibt unten Ausgabe, die das Bild über (erforderlich)

Bearbeiten: < /p>
Ich weiß, dass HTML und JS -CSS -Code auf JSFIDDLE getestet werden können, aber ich weiß nicht, wie ich dieses genaue Problem mit so vielen Divs wiederherstellen kann, wie ich es versucht habe, aber fehlgeschlagen ist. Während ich es noch einmal versuchen werde, wenn Sie bereits eine Idee haben Wie funktioniert der Code? d.h. ist der modale Dialog durch die Divs begrenzt, von denen es aufgerufen wird oder von den CSS begrenzt wird, die es rendern? In Jekyll, index.html -> home.html -> base.html -> body-wrapper.html -> (kauft.html, Selling.html, Leasing.html usw.) < /p>
Body-Wrapper.html

Code: Select all

.
.

.
.





{% include buying.html %}

{% include selling.html %}

.
.




 Services 

buying.html

Code: Select all

[url=#buyModal]


Buying


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




[/url]

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

modal.html

Code: Select all

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

modal-videos.css

Code: Select all

/* 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;
}
}

modal-videos.js

Code: Select all

// 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';
}
});
});