first post here so please be gentle ;-)
I have a query about popup modals, that not only have an image within the modal, but some text too. Attached my current status of the coding, however could not figure out an easy way to get the text caption for each image. The image popups are correct, however text returned is TEXT1 for whichever I click.
Any help would be appreciated. Many thanks Sabs
function onClick(element) {
document.getElementById("modal01").style.display = "block";
document.getElementById("img01").src = element.src;
document.getElementsByClassName("modal-content").innerHTML = this.alt;
}@import url('https://fonts.googleapis.com/css?family=Varela+Round');
html, body {
overflow-x: hidden;
/*height: 100%;*/
}
body {
background: url('../img/dark.jpg');
background-size: cover;
padding: 0;
margin: 0;
font-family: 'Varela Round', sans-serif;
}
.main {
margin: 0 auto;
height: 100%;
display: grid;
grid-template-columns: repeat(6, 1fr);
grid-gap: 5px;
margin-top: 100px;
margin-right: 2rem;
margin-left: 2rem;
}
.mainInner img{
width: 100%;
object-fit: cover;
/*display:inline-block;*/
}
/* ---------------- placement of images within our grid system -----*/
.mainInner:nth-child(1){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(2){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(3){ grid-column: span 1; grid-row: span 1; }
.mainInner:nth-child(1):hover, .mainInner:nth-child(2):hover, .mainInner:nth-child(3):hover{
transform: scale(1.05);
cursor: pointer;
transition: .5s;
opacity: 0.30;
}
/*----------------------- styling the modal ------------------------*/
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* 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.8); /* Black w/ opacity */
/*styling the caption text*/
color: #f1f1f1;
font-size: 20px;
font-weight: bold;
text-align: center;
}
/* Modal Content */
.modal-content {
margin: auto;
display: block;
/*position: absolute;*/
/*transform: translate(-50%, -50%);*/
width: 80%;
max-width: 700px;
}
/* Add Animation */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
@-webkit-keyframes zoom {
from {-webkit-transform:scale(0)}
to {-webkit-transform:scale(1)}
}
@keyframes zoom {
from {transform:scale(0)}
to {transform:scale(1)}
}
/* The Close Button */
.close {
position: absolute;
top: 15px;
right: 35px;
color: #f1f1f1;
font-size: 40px;
font-weight: bold;
transition: 0.3s;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
@media only screen and (max-width: 650px){
.main{
display: block;
}
.mainInner{
margin-bottom: 1rem;
}
.modal-content {
width: 100%;
}
}
/*----------------- end modal styling -----------------*/<!DOCTYPE html>
<html>
<head>
<title>Popup Modal Demo</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">
</head>
<body>
<div class="main center">
<div class="mainInner"><img id="myImg1" src="img/brands/AyalaBar.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg2" src="img/brands/BastianInverun.png" onclick="onClick(this)"></div>
<div class="mainInner"><img id="myImg3" src="img/brands/breuning.png" onclick="onClick(this)"></div>
</div>
<!-- 1st IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT1</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 2nd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT2</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<!-- 3rd IMAGE MODAL -->
<div id="modal01" class="modal" onclick="this.style.display='none'">
<div class="modal-content">
<span class="close">×</span>
<p>TEXT3</p>
<img id="img01" style="max-width: 100%">
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript" src="script2.js"></script>
</body>
</html>
