javascript - 打开多个图像模式不起作用
问题描述
我在 StackOverflow 上查看了很多代码，有些代码接近了，但它与我想要做的不匹配。我已经看到它在没有图像作为模式触发器的情况下工作，但我还没有理解如何打开它，我已经坚持了 2 天。我使用了 google 和 css-tricks 以及其他搜索引擎，但无济于事，我无法弄清楚这一点，所以我请求社区帮助我指出正确的方向。
// Get the modal
// var modal = document.querySelectorAll(".myModal");
// var modal = document.getElementByClassName("myModal");
// var modal = document.getElementById("myModal");
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.querySelectorAll('.myImg');
var imgs = document.querySelectorAll('.circle');
// var modalImg = document.getElementById("img01");
// var modalImg = document.querySelectorAll("img01");
var captionText = document.getElementById("caption");
// const circles = document.querySelectorAll('.circle');
let currentActive = 0;
// img.onclick = function(){
// modal.style.display = "block";
// modalImg.src = this.src;
// captionText.innerHTML = this.alt;
// }
img.forEach((myImg) =>{
myImg.addEventListener('click',() => {
removeActiveClasses();
myImg.classList.add('active');
modal.style.display = "block";
// modalImg.src = this.src;
// captionText.innerHTML = this.alt;
})
})
function removeActiveClasses(){
img.forEach((myImg) =>{
myImg.classList.remove('active');
})}
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
* {
/* border: 3px dotted red; */
box-sizing: border-box;
}
/* body {
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100vh;
overflow: hidden;
margin: 0;
} */
.container {
background-color:aqua;
font-family: 'Roboto', sans-serif;
display: flex;
flex-direction: column;
height:90vh;
/* align-items: center; */
/* justify-content: center; */
/* height: 100vh; */
overflow: hidden;
/* margin: 0; */
}
.top_container{
position:relative; /*parent element*/
background-color:purple;
display:flex;
flex-direction: row;
justify-content: space-around;
height: 750px;
margin-bottom:20px;
margin-top:0px;
}
.top_title {
position: absolute; /*child element*/
display:flex;
/* align-items: center; */
/* flex-direction: row; */
justify-content: space-around;
/* flex-flow: row nowrap; */
/* margin-left:0px; */
background-color:rgb(107, 31, 43);
height:20px;
width:100vw;
/* margin-left:100px; */
}
.top_title h2{
display: flex;
align-items: center;
flex-direction:column;
justify-content: space-around;
height:20px;
color:white;
margin-top:0px;
text-align:center;
/* margin-left: 50px; */
/* margin-right:0px; */
/* padding-top:0px; */
/* margin-left: 50px; */
}
.past_container{
background-color:green;
height: 303px;
width:250px;
margin-top:40px;
/* display:flex; */
/* flex-direction: column; */
/* justify-content: space-around; */
/* margin-right:0px; */
}
.past_container .past_time_line{
position: absolute;
display: flex;
flex-direction: column;
background-color:black;
height:45vh;
/* width:7vw; */
width:15vw;
margin-top:10px;
margin-left:20px;
overflow-y: scroll;
}
.past_container .past_time_line .circle{
border:1px solid white;
border-radius: 10%;
}
.past_container .past_time_line .myImg{
border:1px solid white;
border-radius: 10%;
}
.past_container .past_time_line .active, .myImg{
border:1px solid blue;
border-radius: 10%;
}
/* .past_container .past_time_line .active, .circle{
border:1px solid blue;
border-radius: 10%;
} */
.past_container .past_time_line .modal{
display:none;
/* border:1px solid blue; */
/* border-radius: 10%; */
/* background-color:pink; */
color: white;
/* display: none; Hidden by default */
/* display: none; */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
/* overflow-y: auto; Enable scroll if needed */
/* background-color: rgb(0,0,0); Fallback color */
background-color: grey; /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
background-color: rgba(0, 0, 0, 0.945); /* Black w/ opacity */
}
.title{
position: relative;
color:white;
text-align: center;
}
/* Modal Content (Image) */
.modal-content {
position: relative;
margin: auto;
display: block;
width: 80%;
max-width: 500px;
overflow-y:auto;
}
/* The Close Button */
.close {
position: absolute;
top: 0px;
right: 5px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
opacity: 0.6;
}
.close:hover,.close:focus {
color: rgb(0, 153, 255);
text-decoration: none;
cursor: pointer;
}
/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
.past_container .past_time_line::-webkit-scrollbar {
display: none;
}
.present_container{
background-color:orange;
/* display:flex; */
/* flex-direction: column; */
height: 303px;
width:250px;
/* margin-top:8px; */
margin-top:40px;
/* margin-right:0px; */
}
.present_container .present_time_line{
position: absolute;
display: flex;
background-color:black;
height:45vh;
/* width:7vw; */
width:15vw;
margin-top:10px;
margin-left:20px;
overflow-y: scroll;
}
.present_container .present_time_line::-webkit-scrollbar {
display: none;
}
.future_container{
background-color:white;
/* display:flex; */
/* flex-direction: row; */
height: 303px;
width:250px;
/* margin-top:8px; */
margin-top:40px;
margin-right:0px;
}
.future_container .future_time_line{
position: absolute;
display: flex;
background-color:black;
height:45vh;
/* width:7vw; */
width:15vw;
margin-top:10px;
margin-left:20px;
overflow-y: scroll;
}
.future_container .future_time_line::-webkit-scrollbar {
display: none;
}
.bottom_container{
position: relative ; /*child element*/
background-color:yellow;
display:flex;
flex-direction: row;
justify-content: space-around;
height: 350px;
margin-bottom:20px;
}
.bottom_title{
position: absolute; /*child element*/
display:flex;
/* align-items: center; */
/* flex-direction: row; */
justify-content: space-around;
/* flex-flow: row nowrap; */
/* margin-left:0px; */
background-color:rgb(107, 31, 43);
height:30px;
width:100vw;
/* margin-left:100px; */
}
.bottom_title h2{
display: flex;
align-items: center;
flex-direction:column;
justify-content: space-around;
height:20px;
color:white;
margin-top:0px;
text-align:center;
}
.current_events_container{
/* position: absolute; child element */
background-color:blueviolet;
display:flex;
flex-direction: row;
height: 100px;
width:380px;
margin-top:40px;
/* margin-top:8px; */
}
.legend_container{
/* position: absolute; child element */
background-color:plum;
display:flex;
flex-direction: row;
height: 130px;
width:180px;
margin-top:40px;
/* margin-bottom:10px; */
/* margin-top:8px; */
}
.daily_verses_container{
/* position: absolute; child element */
background-color:blueviolet;
display:flex;
flex-direction: row;
height: 100px;
width:380px;
margin-top:40px;
/* margin-top:8px; */
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>7th Seal</title>
</head>
<body>
<div class="container">
<div class="top_container">
<div class="top_title">
<h2>Past</h2>
<h2>Present</h2>
<h2>Future</h2>
</div>
<div class="past_container">
<div class="past_time_line">
<!--The Trigger-->
<div style='color:white'><img class='myImg' class="circle" src="../prophecy_website/images/past/creation.jpg" alt="..." width='70'><span style='margin-left: 10px; margin-top: 7px; position: absolute;'>Creation</span>
<!-- The Modal -->
<div class="modal" id="myModal">
<!-- The Close Button -->
<span class="close">×</span>
<div class="title">
<img src="../prophecy_website/images/past/creation.jpg" alt="Earth" width='150' style='margin-top:px;'>
<h1>Creation</h1>
</div>
<!-- Modal Content (The Image) -->
<div class="modal-content" class="img01">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident temporibus recusandae at voluptas, quaerat ad dignissimos expedita debitis unde molestias harum obcaecati eveniet vitae praesentium dolore in dolores eius! Qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident temporibus recusandae at voluptas, quaerat ad dignissimos expedita debitis unde molestias harum obcaecati eveniet vitae praesentium dolore in dolores eius! Qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident temporibus recusandae at voluptas, quaerat ad dignissimos expedita debitis unde molestias harum obcaecati eveniet vitae praesentium dolore in dolores eius! Qui.</p>
</div>
<!-- Modal Caption (Image Text) -->
</div>
</div>
<!-- <div class="circle"><img src="/images/past/creation.jpg" alt="..." class="rounded-circle" height='20' width='70'></div> -->
<div style='color:white'><img class='myImg' class="circle" src="../prophecy_website/images/past/flood.jpeg" alt="..." width='70'><span style='margin-left: 10px; margin-top: 7px; position: absolute;'>The Flood</span>
<!-- The Modal -->
<div class="modal" id="myModal2">
<!-- The Close Button -->
<span class="close">×</span>
<div class="title">
<img src="../prophecy_website/images/past/flood.jpeg" alt="Noah's Ark" width='150' style='margin-top:px;'>
<h1>The Flood</h1>
</div>
<!-- Modal Content (The Image) -->
<div class="modal-content" class="img01">
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident temporibus recusandae at voluptas, quaerat ad dignissimos expedita debitis unde molestias harum obcaecati eveniet vitae praesentium dolore in dolores eius! Qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident temporibus recusandae at voluptas, quaerat ad dignissimos expedita debitis unde molestias harum obcaecati eveniet vitae praesentium dolore in dolores eius! Qui.</p>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Provident temporibus recusandae at voluptas, quaerat ad dignissimos expedita debitis unde molestias harum obcaecati eveniet vitae praesentium dolore in dolores eius! Qui.</p>
</div>
<!-- Modal Caption (Image Text) -->
</div>
</div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
<div><img class="circle" src="/images/past/creation.jpg" alt="..." width='70'></div>
</div>
</div>
<div class="present_container">
<div class="present_time_line"></div>
</div>
<div class="future_container">
<div class="future_time_line"></div>
</div>
</div>
<div class="bottom_container">
<div class="bottom_title">
<h2>Current Events</h2>
<h2>Legend</h2>
<h2>End OF Time Verses</h2>
</div>
<div class="current_events_container"></div>
<div class="legend_container"></div>
<div class="daily_verses_container"></div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>解决方案
推荐阅读
- scala - 为什么输出显示不正确？
- sql - 使用 SIGN 函数，但无法转换为负数
- mysql - 如何根据最小日期和其他一些条件过滤记录，其中每个事务在 SQL 中可以有多个日期？
- android - 我可以用 React Native 上新制作的应用程序更新我现有的 Android 和 iOS 应用程序吗？
- c - 最后在双向链表中插入节点
- nginx - server_name 正则表达式在 nix-shell 中无法按预期工作
- javascript - GoogleScript HTML 服务中的可点击超链接未打开
- c++ - OpenMP在mac上运行单线程，线程数不为0
- r - 如何替换 rename_at 中现已弃用的功能
- java - 无法在java中获取图像url