嘿，我只是想学习编程，但我遇到了一个问题。 问题是试图在多个模态的模态中获得多个模态，如果这是有道理的。
https://jsfiddle.net/cameLadv/5/
var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.getAttribute('data-modal');
document.getElementById(modal).style.display = "block";
}
});
var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
btn.onclick = function() {
var modal = btn.closest('.modal');
modal.style.display = "none";
}
});
window.onclick = function(event) {
if (event.target.className === "modal") {
event.target.style.display = "none";
}
}
var ladom = document.getElementById('myA');
var a = document.getElementById("kobAtag");
var span = document.getElementsByClassName("atagclose")[0];
a.onclick = function() {
ladom.style.display = "block";
}
span.onclick = function() {
ladom.style.display = "none";
}
window.onclick = function(event) {
if (event.target == ladom) {
ladom.style.display = "none";
}
}header {
width:100%;
padding-bottom:10px;
}
body {
font-family: arial;
margin:0px;
width:100%;
}
.row1{
float:center;
padding:0px 0px 0px 350px;
}
.modal {
display: none;
position: fixed;
z-index: 8888;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
background-color: #fefefe;
margin: 10vh auto;
padding: 20px;
border: 1px solid #888;
width: 100%;
}
@media (min-width: 1366px) {
.modal-content {
background-color: #fefefe;
margin: 10vh auto;
padding: 20px;
border: 1px solid #888;
width: 90%;
}
}
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
button.button {
background:none;
border-top:none;
border-right:none;
border-left:none;
border-bottom:none;
font-size:16px;
}
button {
margin:0;
}
@media {
.modal-content p {
background-color: #fefefe;
margin:0px;
left:700px;
bottom:500px;
width:800px;
height:100px;
position:relative;
padding:0;
}
}
@media(min-width: 500px) {
.modal-content img {
width:500px;
height:500px;
margin:0px;
position:relative;
left:40px;
}
}
@media{
.modal-content h1{
margin:0px;
left:1500px;
bottom:50px;
position:relative;
padding:0;
}
}
@media{
.modal-content a:hover{
color:grey;
}
}
@media{
.modal-content a{
color:grey;
text-decoration:none;
}
}
@media{
.modal-content h2{
margin:0px;
left:1470px;
bottom:50px;
position:relative;
padding:0;
}
@media{
.modal-content h3 {
margin:0;
padding-bottom:10px;
padding-left:35px;
}
.købting {
margin:0;
padding-left:450px;
}
.kob {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.kob-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.kobclose {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.kobclose:hover,
.kobclose:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
.atag {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.atag-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.atagclose {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.atagclose:hover,
.atagclose:focus {
color: black;
text-decoration: none;
cursor: pointer;
}<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="mgstyle.css">
<title>Marias Galleri</title>
</head>
<body>
<div class="row1">
<button class="button" data-modal="modalOne">
one
</button>
<button class="button" data-modal="modalTwo">
two
</button>
<button class="button" data-modal="modalThree">
three
</button>
<div id="modalOne" class="modal">
<div class="modal-content">
<div class="contact-form">
<a class="close">×</a>
<div class="flub">
<h3>Title om billedet</h3>
<img src="images/one.png">
<p>Words about the picture, Words about the picture, </p>
<div class="pris"><h2> Pris 500 </h2></div>
<a id="kobAtag"><h1> open second modal</h1></a>
<div id="myA" class="atag" data-modal="kobmodal">
<div class="atag-content">
<span class="atagclose">×</span>
<h3> THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, </h3>
</div>
<script src="scriptbok.js"></script>
</div>
</div>
</div>
</div>
</div>
<div id="modalTwo" class="modal">
<div class="modal-content">
<div class="contact-form">
<span class="close">×</span>
<h3>Title om billedet</h3>
<img src="images/two.png">
<p>Words about the picture, Words about the picture, </p>
<div class="pris"><h2> Pris 500 </h2></div>
<a id="kobAtag"><h1> open second modal</h1></a>
<div id="myA" class="atag" data-modal="kobmodal">
<div class="atag-content">
<span class="atagclose">×</span>
<h3> THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, </h3>
</div>
<script src="scriptbok.js"></script>
</div>
</div>
</div>
</div>
<div id="modalThree" class="modal">
<div class="modal-content">
<div class="contact-form">
<span class="close">×</span>
<h3>Title om billedet</h3>
<img src="images/three.png">
<p>Words about the picture, Words about the picture, </p>
<div class="pris"><h2> Pris 500 </h2></div>
<a id="kobAtag"><h1>open second modal</h1></a>
<div id="myA" class="atag" data-modal="kobmodal">
<div class="atag-content">
<span class="atagclose">×</span>
<h3> THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, THIS SHOULD WORK, </h3>
</div>
<script src="scriptbok.js"></script>
</div>
</div>
</div>
</div>
<script src="script.js"></script>
</div>
</div>
</body>
</html>
开放的第二个模态有点偏离屏幕，所以你可能需要缩小 - 对不起我是一个菜鸟。 第二种模式适用于＆＃34; one＆＃34;第一模态，任何帮助将不胜感激