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 wechseln Sie von < /p>

Code: Select all

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

gibt unten Ausgabe an, die immer noch nicht wie das Bild über (erforderlich)
ist
Bearbeiten: < /p>
Ich weiß, dass HTML, JS CSS -Code auf JSFIDDLE getestet werden kann, aber ich weiß nicht, wie man dieses genaue Problem mit so vielen DIVs neu erstellt, 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';
}
});
});