使用JS的多个模态

Question

我有多个div容器，都包含图像和一些文本。我想为所有图像制作模态，但是我不能让它们工作，我也不知道还需要改变什么。我特别挣扎，因为我的画布菜单中也有一个设置模式。 如何使所有图像作为模态工作而不会丢失“设置关闭”菜单？我知道我必须改变JS才能上课而不是上课，但它仍然无法工作，我也不知道自己错过了什么。

＆＃13;

＆＃13;

<!-- OFF MENU CANVAS JS-->
<script>
function openNav() {
    document.getElementById("mySidenav").style.width = "250px";
    document.getElementById("main").style.marginLeft = "250px";
}

function closeNav() {
    document.getElementById("mySidenav").style.width = "0";
    document.getElementById("main").style.marginLeft= "0";
}
</script>
<!-- END OFF MENU CANVAS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
	
<!-- Begin settings page popup-->
<script>
// Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>
<!-- End settings page popup-->

<!-- Begin img enlargen-->
	<script>
// Get the modal
var modal = 
this.getAttribute("rel"); document.getElementById('myModal2');

// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = this.getAttribute("rel"); document.getElementById('myImg');
var modalImg = document.getElementsByClassName("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    captionText.innerHTML = this.alt;
}

// 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";
}
</script>
<!--End img enlargen-->

＆＃13;

@charset "UTF-8";
/* CSS Document */

header {
	z-index: 1000;
	width: 100%;
	background-color: #5BC2FF;
    margin: 0 auto;
	position: relative;
	box-shadow: 0px 0.5px 2px 0.2px black;
}

/* HEADER */
#airplane {
	margin-left: 5px;
	display: inline-block;
}

.headertext2 {
	z-index: 100;
  	text-align: center;
	font-family:"Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", "Helvetica", "Arial", "sans-serif";
	display: inline;
	margin-left: 8px;
	font-size: 30px;
}

/* OFF CANVAS MENU BEGINS*/

.sidenav {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 1;
    top: 0;
    left: 0;
    background-color: #5BC2FF;
    overflow-x: hidden;
    transition: 0.5s;
    padding-top: 60px;
}

.sidenav a {
    padding: 8px 8px 8px 32px;
    text-decoration: none;
    font-size: 25px;
    color: #586166;
    display: block;
    transition: 0.3s;
}

.sidenav a:hover {
    color: #f1f1f1;
}

.sidenav .closebtn {
    position: absolute;
    top: 0;
    right: 25px;
    font-size: 36px;
    margin-left: 50px;
}

#main {
    transition: .5s;
    padding: 16px;
	display: inline-block;
}

@media screen and (max-height: 450px) {
  .sidenav {padding-top: 15px;}
  .sidenav a {font-size: 18px;}
}

/* OFF CANVAS MENU END*/

body {
	background-color: #586166;
	height: 1000px;
}

p.div-container {
	font-family: 'annie-use-your-telescope', "Arial";
	margin-top: 5%;
	font-size: 4vw;
}

.pic {
	margin-bottom: 10%;
	margin-left: 10px;
	margin-right: 10px;
	padding:1px;
   	border:1px solid #021a40;
	background-color: #FF5B5F;
	float: left;
	width: 50%;
	height: 50%;
}

#FirstPic {
	margin-top: 100px;
}

#LastPic {
	margin-bottom: 100px;
}

#FirstDesc {
	margin-top: 100px;
}

.div-container {
	display: flex;
	overflow: hidden;
}

.Description {
	float: left;
	width: 50%;
	height: 100px;
	color: white;
	padding-right: 5px;
}

/*SIGN UP FORM BEGIN*/
* {
    box-sizing: border-box;
	margin: 0;
	padding: 0;
}

input[type=text], select, textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #ccc;
    border-radius: 4px;
    resize: vertical;
}

label {
    padding: 8px 12px 5px 3px;
    display: inline-block;
}

input[type=submit] {
    background-color: #D29E95;
    color: white;
    padding: 12px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    float: right;
	margin-bottom: 40px;
}

input[type=submit]:hover {
    background-color: #FF5B5F;
}

.container {
    border-radius: 5px;
    background-color: #f2f2f2;
    padding: 20px;
	margin-top: 30px;
}

.col-25 {
    float: left;
    width: 25%;
    margin-top: 6px;
}

.col-75 {
    float: left;
    width: 75%;
    margin-top: 6px;
}

/* Clear floats after the columns */
.row:after {
    content: "";
    display: table;
    clear: both;
}

/* Responsive layout - when the screen is less than 600px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .col-25, .col-75, input[type=submit] {
        width: 100%;
        margin-top: 0;
    }
}
/*SIGN UP FORM END*/

.section {
	background-color: #5ECCBA;
	width: 97%;
	white-space: nowrap;
	height: 375px;
	margin: 85px 1.5% 20px;
	padding-bottom: 5px;
	float: left;
	display: block;
	box-shadow: 0px 2px 2px 0.2px black;
}

#ProfilePic {
	padding-top: 10px;
	padding-left: 10px;
}

h2 {
	display: inline;
	margin-left: 8%;
	text-decoration: underline;
	font-weight: 400;
	color: white;
}

.ages {
	float: left;
	display: inline;
	margin-top: -30px;
	margin-left: 50%;
	text-align: center;
	padding-left:120px;
	padding-top: -600px;
	font-weight:lighter;
	color: white;
}

.col-6 {
	text-align: center;
}

.col-3 {
  	display: inline-block;
  	padding: 2px 2% 0.5% 2%;
	margin: 0% 7%;
	width: auto;
	height: 30px;
	text-align: center;
	float: left;
	box-shadow: 1px 1px 2px 0.2px white;
}

.inline-block {
	display:inline-block;
	float:left;
	margin-left:5%;
	margin-top: 1%;
}

.titles {
	margin-left: 25%;
	padding-top: 25px;
	color: white;
}

.kmtravel {
	text-align: center;
	margin-left: 25%;
	margin-top: -15px;
	color: white;
}

.myworld {
	background-color: #5ECCBA;
	display: inline-block;
	width: 97%;
	height: 50px;
	text-align: center;
	margin: 0% 1.5% 0px;
	box-shadow: 0px -1px 2px 0.2px black;
	color: white;
	padding-top: 10px;
	border-bottom: medium;
}

#MyMapColours {
	background-color: white;
	width: 97%;
	margin-left: 1.5%;
	margin-right: 1.5%;
	margin-bottom: 10px;
	margin-top: 2px;
	display: inline-block;
}

.lefttodiscover {
	background-color: #5ECCBA;
	display: inline-block;
	width: 97%;
	height: 50px;
	text-align: center;
	margin: 10px 1.5% 0px;
	box-shadow: 0px -1px 2px 0.2px black;
	color: white;
	padding-top: 10px;
}

#map {
	width:97%;
	height:400px;
	background:white;
	margin: 2px 1.5% 70px;
	box-shadow: 1px 1px 2px 0.2px black;
}

/* SETTINGS PAGE BEGINS */
/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    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: 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 */
.modal-content {
    background-color: white;
	box-shadow: 0px -0.5px 2px 0.2px black;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}

button, input[type="submit"], input[type="reset"] {
    background: none;
    color: inherit;
    border: none;
    padding: 0;
    font: inherit;
    cursor: pointer;
    outline: inherit;
}

/* The Close Button */
.close {
    color: #aaaaaa;
    float: right;
	margin-left:90%;
    font-size: 28px;
    font-weight: bold;
	transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}
/* SETTINGS PAGE END*/

/* ENLARGEN IMAGE BEGIN*/
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal2 {
    display: none; /* Hidden by default */
    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: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal2-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal2-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@keyframes zoom {
    from {transform:scale(0)} 
    to {transform:scale(1)}
}

/* The Close Button */
.close2 {
    top: 15px;
    right: 35px;
	margin-bottom: 20px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
	margin-right: 10%;
}

.close2:hover,
.close2:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal2-content {
        width: 100%;
    }
}
/* ENLARGEN IMAGE END*/

footer {
	background: #5BC2FF;
	color:white;
	height:50px;
    position: fixed;
	bottom: 0;
    left: 0;
    right: 0;
	padding-top: 12px;
	text-align: center;
	box-shadow: 0px -0.5px 2px 0.2px black;
}
 

＆＃13;

<!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, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
  <title>My Journey</title>
  <link href="css/mystyles.css" rel="stylesheet" type="text/css">
</head>

<body><!-- BEGIN BODY-->
	
<div class="jumbotron-fluid">
	<header class="fixed-top">
		<!-- OFF CANVAS MENU START -->
	<div id="mySidenav" class="sidenav">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>
  <a href="index.html">My Journey</a>
  <a href="My Account.html">My Account</a>
  <a href="New Account.html">New Account</a>
  <a href="#">My Friends</a>
		<br><br><br><br><br><br><br><br><br><br><br><br>
<hr>
		<a href="#"> <button id="myBtn">Contact</button></a>
		<a href="#">Settings</a>
		<!-- Trigger/Open The Modal -->


<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <span class="close">&times;</span>
	  <h3>Are you having trouble using the app?</h3>
    <p>Visit our website www.MyJourney.com<br>
	Or contact us at +31 6 12510336</p>
	  <p>For more information.</p>
  </div>

</div>
		</div>

<div id="main">
  <span style="font-size:30px;cursor:pointer" onclick="openNav()">&#9776; </span>
		</div>
<!-- OFF CANVAS MENU END -->
	
			 <div id="airplane"><a href="index.html"> <img src="img/Airplane logo.png" alt="logoheader" width="40px"> </a> </div>
		  
		  <h1 class="headertext2">My Trips</h1>
	</header>
	
	<div class="div-container">
		<div class="pic" id="FirstPic"><img src="img/Kenya elephants.jpg" alt="TravelPic" width="100%" height="100%"></div>
		<div class="Description" id="FirstDesc">
		<p>KENYA <br>
		<i>What:</i> The Big 5 <br>
		<i>With:</i> Tom <br>
		<i>When:</i> Jan. 2018 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic">
			<img id="myImg" src="img/Mirror Lakes.jpg" alt="Mirror Lakes" width="100%" height="100%">
			</div>
		<div class="Description">
		<p>NEW ZEALAND <br>
		<i>What:</i> Mirror Lakes <br>
		<i>With:</i> Robyn <br>
		<i>When:</i> Feb. 2014 <br>
			</p>
		</div>
	</div>
	
		<!-- The Modal -->
<div id="myModal2" class="modal2">
  <span class="close">&times;</span>
  <img class="modal-content2" alt="img01"><img class="img01" alt="img01">
  <div id="caption"></div>
</div>
	
	<div class="div-container">
		<div class="pic"><img src="img/Brazil rock dedo de deus.jpg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>BRAZIL <br>
		<i>What:</i> Dedo de Deus <br>
		<i>With:</i> Barbara & Paul <br>
		<i>When:</i> May. 2017 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic"><img src="img/Sunset orange.jpg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>BELGIUM <br>
		<i>What:</i> Sunset <br>
		<i>With:</i> Maya <br>
		<i>When:</i> Nov. 2016 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic"><img src="img/Amsterdam.jpg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>NETHERLANDS <br>
		<i>What:</i> Canals <br>
		<i>With:</i> Vera <br>
		<i>When:</i> Sep. 2016 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic"><img src="img/Lake Bled Slovenia.jpg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>SLOVENIA <br>
		<i>What:</i> Lake Bled <br>
		<i>With:</i> Silvia & Mark <br>
		<i>When:</i> Apr. 2016 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic"><img src="img/Table Mountain.jpeg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>SOUTH AFRICA <br>
		<i>What:</i> Table Mountain <br>
		<i>With:</i> Pauline <br>
		<i>When:</i> Aug. 2015 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic"><img src="img/Mirror Lakes.jpg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>NEW ZEALAND <br>
		<i>What:</i> Mirror Lakes <br>
		<i>With:</i> Robyn <br>
		<i>When:</i> Feb. 2014 <br>
			</p>
		</div>
	</div>
	
	<div class="div-container">
		<div class="pic" id="LastPic"><img src="img/Caye Caulker Belize.jpg" alt="TravelPicture" width="100%" height="100%"></div>
		<div class="Description">
		<p>BELIZE <br>
		<i>What:</i> Caye Caulker <br>
		<i>With:</i> Romy <br>
		<i>When:</i> Oct. 2013 <br>
			</p>
		</div>
	</div>


<footer><!--BEGIN FOOTER-->
Adventure may hurt you but monotony will kill you.		
</footer><!--END FOOTER-->

	
	</div><!-- END CONTAINER -->

</body><!--END BODY-->
</html>

＆＃13;

＆＃13;

＆＃13;