我创建了一个具有五个按钮的CSS网格。每个打开一个不同的模式窗口。这些窗口应该能够通过按右上方的X或窗口外部的任何位置来关闭。
HTML
<div class="container">
<div class="g1">
<div class="työkalu">
<div id="vasara" class="animation-div shake-slow shake-constant shake-constant-hover">
<img src="http://placekitten.com/g/200/301" alt="">
<!-- Trigger/Open The Modal -->
<button id="avaaVasara" class="valitsija">+</button>
<h3>Red</h3>
</div>
<!-- The Modal -->
<div id="vasaraIkkuna" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="suljeVasara" class="close">×</span>
<h3>Red</h3>
<p>What the heck just happened, something feels fishy cat meoooow i iz master of hoomaan, not hoomaan master of i, oooh damn dat dog so be superior poop in the plant pot, get video posted to internet for chasing red dot. Kitty scratches couch bad kitty scratch the postman wake up lick paw wake up owner meow meow i will ruin the couch with my claws. Shake treat bag chase after silly colored fish toys around the house but take a big fluffing crap 💩. Fall over dead (not really but gets sypathy) i'm going to lap some water out of my master's cup meow or eat grass, throw it back up. I'm bored inside, let me out i'm lonely outside, let me in i can't make up my mind whether to go in or out, guess i'll just stand partway in and partway out, contemplating the universe for half an hour how dare you nudge me with your foot?!?! leap into the air in greatest offense!</p>
</div>
</div>
</div>
</div>
<div class="g2">
<div class="työkalu">
<div id="ruuviväännin" class="animation-div shake-slow2 shake-constant2 shake-constant-hover2">
<img src="http://placekitten.com/g/198/302" alt="">
<!-- Trigger/Open The Modal -->
<button id="avaaRuuviväännin" class="valitsija">+</button>
<h3>Blue</h3>
</div>
<!-- The Modal -->
<div id="ruuviväänninIkkuna" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="suljeRuuviväännin" class="close">×</span>
<h3>Blue</h3>
<p>Purrrrrr hit you unexpectedly missing until dinner time eat a rug and furry furry hairs everywhere oh no human coming lie on counter don't get off counter and murr i hate humans they are so annoying run outside as soon as door open. Cat gets stuck in tree firefighters try to get cat down firefighters get stuck in tree cat eats firefighters' slippers kitty scratches couch bad kitty yet plan steps for world domination and annoy kitten brother with poking i heard this rumor where the humans are our owners, pfft, what do they know?!</p>
</div>
</div>
</div>
</div>
<div class="g3">
<div class="työkalu">
<div id="kulmahiomakone" class="animation-div shake-slow3 shake-constant3 shake-constant-hover3">
<img src="http://placekitten.com/g/200/303" alt="">
<!-- Trigger/Open The Modal -->
<button id="avaaKulmahiomakone" class="valitsija">+</button>
<h3>Orange</h3>
</div>
<!-- The Modal -->
<div id="kulmahiomakoneIkkuna" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="suljeKulmahiomakone" class="close">×</span>
<h3>Orange</h3>
<p>Show belly throw down all the stuff in the kitchen swat at dog cough hairball on conveniently placed pants. Meow meow we are 3 small kittens sleeping most of our time, we are around 15 weeks old i think.</p>
</div>
</div>
</div>
</div>
<div class="g4">
<div class="työkalu">
<div id="pistosaha" class="animation-div shake-slow4 shake-constant4 shake-constant-hover4">
<img src="http://placekitten.com/g/200/304" alt="">
<!-- Trigger/Open The Modal -->
<button id="avaaPistosaha" class="valitsija">+</button>
<h3>White</h3>
</div>
<!-- The Modal -->
<div id="pistosahaIkkuna" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="suljePistosaha" class="close">×</span>
<h3>White</h3>
<p>Spread kitty litter all over house ooooh feather moving feather! funny little cat chirrup noise shaking upright tail when standing next to you get video posted to internet for chasing red dot. Experiences short bursts of poo-phoria after going to the loo man running from cops stops to pet cats, goes to jail damn that dog your pillow is now my pet bed yet attempt to leap between furniture but woefully miscalibrate and bellyflop onto the floor; what's your problem?</p>
</div>
</div>
</div>
</div>
<div class="g5">
<div class="tekijä-div">
<img id="tekijä" src="http://placekitten.com/200/300" alt="">
</div>
</div>
<div class="g6">
<div class="työkalu">
<div id="poravasara" class="animation-div shake-slow6 shake-constant6 shake-constant-hover6">
<img src="http://placekitten.com/g/199/306" alt="">
<!-- Trigger/Open The Modal -->
<button id="avaaPoravasara" class="valitsija">+</button>
<h3>Stripes</h3>
</div>
<!-- The Modal -->
<div id="poravasaraIkkuna" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="suljePoravasara" class="close">×</span>
<h3>Stripes</h3>
<p>Pose purrfectly to show my beauty poop on floor and watch human clean up sit on human. Cats are a queer kind of folk 𝕄𝔼𝕆𝕎 fart in owners food but sugar, my siamese, stalks me (in a good way), day and night this cat happen now, it was too purr-fect!!! so jump launch to pounce upon little yarn mouse, bare fangs at toy run hide in litter box until treats are fed so find a way to fit in tiny box.</p>
</div>
</div>
</div>
</div>
</div>
CSS
.container {
display: grid;
/* grid-template-columns: auto auto auto;
grid-template-rows: auto auto auto; */
grid-template-columns: 33.3% 33.3% 33.3%;
grid-template-rows: 33.3% 33.3% 33.3%;
max-width: 1200px;
margin: 0 auto;
justify-items: center;
align-items: center;
}
/* MODAL */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
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/Box */
.modal-content {
position: relative;
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
max-width: 400px; /* Could be more or less, depending on screen size */
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
/* MODAL END */
JAVASCRIPT
// Näytä työkalu pop-up -ikkunat
// MODAL vasara
var vasaraModal = document.getElementById("vasaraIkkuna");
// Get the button that opens the modal
var vasaraBtn = document.getElementById("avaaVasara");
// Get the <span> element that closes the modal
var vasaraSpan = document.getElementById("suljeVasara");
// When the user clicks on the button, open the modal
vasaraBtn.onclick = function() {
vasaraModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vasaraSpan.onclick = function() {
vasaraModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == vasaraModal) {
vasaraModal.style.display = "none";
}
}
//
// MODAL ruuviväännin
var ruuviväänninModal = document.getElementById("ruuviväänninIkkuna");
// Get the button that opens the modal
var ruuviväänninBtn = document.getElementById("avaaRuuviväännin");
// Get the <span> element that closes the modal
var ruuviväänninSpan = document.getElementById("suljeRuuviväännin");
// When the user clicks on the button, open the modal
ruuviväänninBtn.onclick = function() {
ruuviväänninModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
ruuviväänninSpan.onclick = function() {
ruuviväänninModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == ruuviväänninModal) {
ruuviväänninModal.style.display = "none";
}
}
//
// MODAL kulmahiomakone
var kulmahiomakoneModal = document.getElementById("kulmahiomakoneIkkuna");
// Get the button that opens the modal
var kulmahiomakoneBtn = document.getElementById("avaaKulmahiomakone");
// Get the <span> element that closes the modal
var kulmahiomakoneSpan = document.getElementById("suljeKulmahiomakone");
// When the user clicks on the button, open the modal
kulmahiomakoneBtn.onclick = function() {
kulmahiomakoneModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
kulmahiomakoneSpan.onclick = function() {
kulmahiomakoneModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == kulmahiomakoneModal) {
kulmahiomakoneModal.style.display = "none";
}
}
//
// MODAL pistosaha
var pistosahaModal = document.getElementById("pistosahaIkkuna");
// Get the button that opens the modal
var pistosahaBtn = document.getElementById("avaaPistosaha");
// Get the <span> element that closes the modal
var pistosahaSpan = document.getElementById("suljePistosaha");
// When the user clicks on the button, open the modal
pistosahaBtn.onclick = function() {
pistosahaModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
pistosahaSpan.onclick = function() {
pistosahaModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == pistosahaModal) {
pistosahaModal.style.display = "none";
}
}
//
// MODAL poravasara
var poravasaraModal = document.getElementById("poravasaraIkkuna");
// Get the button that opens the modal
var poravasaraBtn = document.getElementById("avaaPoravasara");
// Get the <span> element that closes the modal
var poravasaraSpan = document.getElementById("suljePoravasara");
// When the user clicks on the button, open the modal
poravasaraBtn.onclick = function() {
poravasaraModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
poravasaraSpan.onclick = function() {
poravasaraModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == poravasaraModal) {
poravasaraModal.style.display = "none";
}
}
//
您可以在CodePen https://codepen.io/konspaul/pen/MWwddvW中找到DEMO
这似乎有效：我删除了所有事件监听器，并将其替换为唯一的ev参见：window.onclick = function(event) only works for first item
// Näytä työkalu pop-up -ikkunat
// MODAL vasara
var vasaraModal = document.getElementById("vasaraIkkuna");
// Get the button that opens the modal
var vasaraBtn = document.getElementById("avaaVasara");
// Get the <span> element that closes the modal
var vasaraSpan = document.getElementById("suljeVasara");
// When the user clicks on the button, open the modal
vasaraBtn.onclick = function() {
vasaraModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
vasaraSpan.onclick = function() {
vasaraModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
document.body.onclick = function(event) {
if (event.target.className.includes("modal")) {
event.target.style.display = "none";
}
}
//
// MODAL ruuviväännin
var ruuviväänninModal = document.getElementById("ruuviväänninIkkuna");
// Get the button that opens the modal
var ruuviväänninBtn = document.getElementById("avaaRuuviväännin");
// Get the <span> element that closes the modal
var ruuviväänninSpan = document.getElementById("suljeRuuviväännin");
// When the user clicks on the button, open the modal
ruuviväänninBtn.onclick = function() {
ruuviväänninModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
ruuviväänninSpan.onclick = function() {
ruuviväänninModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
// MODAL kulmahiomakone
var kulmahiomakoneModal = document.getElementById("kulmahiomakoneIkkuna");
// Get the button that opens the modal
var kulmahiomakoneBtn = document.getElementById("avaaKulmahiomakone");
// Get the <span> element that closes the modal
var kulmahiomakoneSpan = document.getElementById("suljeKulmahiomakone");
// When the user clicks on the button, open the modal
kulmahiomakoneBtn.onclick = function() {
kulmahiomakoneModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
kulmahiomakoneSpan.onclick = function() {
kulmahiomakoneModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
//
// MODAL pistosaha
var pistosahaModal = document.getElementById("pistosahaIkkuna");
// Get the button that opens the modal
var pistosahaBtn = document.getElementById("avaaPistosaha");
// Get the <span> element that closes the modal
var pistosahaSpan = document.getElementById("suljePistosaha");
// When the user clicks on the button, open the modal
pistosahaBtn.onclick = function() {
pistosahaModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
pistosahaSpan.onclick = function() {
pistosahaModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
//
// MODAL poravasara
var poravasaraModal = document.getElementById("poravasaraIkkuna");
// Get the button that opens the modal
var poravasaraBtn = document.getElementById("avaaPoravasara");
// Get the <span> element that closes the modal
var poravasaraSpan = document.getElementById("suljePoravasara");
// When the user clicks on the button, open the modal
poravasaraBtn.onclick = function() {
poravasaraModal.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
poravasaraSpan.onclick = function() {
poravasaraModal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
//