Ich habe andere Optionen mit dem Datenhintergrund untersucht, um zu verhindern, dass das Modell geschlossen wird, wenn Sie außerhalb der Schließen-Schaltfläche klicken. Vielleicht könnte es sein, dass ich den Hintergrund dem falschen Stück Code hinzufüge, aber ich hatte gehofft, dass Sie mir dabei helfen könnten.Mein Datenhintergrund funktioniert nicht
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1670;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
padding-bottom: 20px;
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: scroll;
/* Enable scroll if needed */
overflow-x: hidden;
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.9);
/* Black w/ opacity */
}
/* home page special button Content */
.special-content {
width: 80%;
height: auto;
background-color: #CCCCCC;
margin-left: 10%;
margin-right: 10%;
border-radius: 10px;
display: block;
}
/* The Close Button */
.close {
position: absolute;
top: 50px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #755378;
text-decoration: none;
cursor: pointer;
}
<a class="Star-btn" href="#" style="text-decoration:none;" onclick="onClick(this)">Specials</a>
<div id="modal01" class="modal" onclick="this.style.display='none'" data-backdrop="static" data-keyboard="false">
<span class="close">×</span>
<div class="special-content">
<p id="img01" class="TextHome" alt="">random inforomation.</p>
</div>
</div>
Es ist wahrscheinlich eine einfache Lösung oder etwas klein, die hinzugefügt werden muss, aber ich kann nicht zu verwalten scheinen, würde ich schätze jede Hilfe
Grüße Francois
Einfach entfernen Sie den onclick Handler von '# model01' und legen Sie es in' .close'. Rufen Sie dann eine separate Schließfunktion auf oder gehen Sie zu "Elternelement" und verstecken Sie es dann. – Werner