Develop Reference

Image modals on multi-tab page

I want to create a multi-tabs page with an image modal on each tab.
I used code from w3school.com. The modal only shows on the first page but not in the others. No matter what image I click, the modal with that image will show only in the first page. I am new to web design, so I prefer to use CSS and simple JavaScript.
Can anybody help me figure out how to make the modal show on the correct page?
Edited on Oct 02, 2021, I revised my CSS and Javascript and fixed the issue using a loop. Just sharing for anyone might be interested in.
Revised JavaScript
///// Image display modals
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the image and insert it inside the modal - use its "alt"
// text as a caption
var img = document.querySelectorAll("img.myImg")
var modalImg = document.querySelectorAll("img.modal-content")
var captionText = document.querySelectorAll(".modal-caption");
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the image, open the modal
for (var i = 0; i < img.length; i++) {
img[i].onclick = function() {
for (var index in modals) {
modals[index].style.display = "block";
for (var index in modalImg) {
modalImg[index].src = this.src;};
for (var index in captionText) {
captionText[index].innerHTML = this.alt;}
}
}
}
// When the user clicks on <span> (x), close the modal
for (var i = 0; i < spans.length; i++) {
spans[i].onclick = function() {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target.classList.contains('modal')) {
for (var index in modals) {
if (typeof modals[index].style !== 'undefined') modals[index].style.display = "none";
}
}
}
Revised CSS
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
/* Caption of Modal Image */
.modal-caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation */
.modal-content, .modal-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;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
HTML
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_nature.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="News" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="Contact" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>
Original CSS
* {box-sizing: border-box}
/* Set height of body and the document to 100% */
body, html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {background-color: red;}
#News {background-color: green;}
#Contact {background-color: blue;}
#About {background-color: orange;}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-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 */
.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;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px){
.modal-content {
width: 100%;
}
}
Original JavaScript
<script>
function openPage(pageName,elmnt,color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("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>

Separate function for each modal will work out now , further you can look into this and loops for small code in the near future
function openPage(pageName, elmnt, color) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
tablinks = document.getElementsByClassName("tablink");
for (i = 0; i < tablinks.length; i++) {
tablinks[i].style.backgroundColor = "";
}
document.getElementById(pageName).style.display = "block";
elmnt.style.backgroundColor = color;
}
// Get the element with id="defaultOpen" and click on it
document.getElementById("defaultOpen").click();
// Get the modal
var modal = document.getElementById("myModal");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img = document.getElementById("myImg");
var modalImg = document.getElementById("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";
}
// Get the 2nd modal
var modal2 = document.getElementById("myModal2");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img2 = document.getElementById("myImg2");
var modalImg2 = document.getElementById("img02");
var captionText2 = document.getElementById("caption2");
img2.onclick = function() {
modal2.style.display = "block";
modalImg2.src = this.src;
captionText2.innerHTML = this.alt;
}
// Get the 2nd <span> element that closes the modal
var span2 = document.getElementsByClassName("close")[1];
// When the user clicks on <span> (x), close the modal
span2.onclick = function() {
modal2.style.display = "none";
}
// Get the 3rd modal
var modal3 = document.getElementById("myModal3");
// Get the image and insert it inside the modal - use its "alt" text as a caption
var img3 = document.getElementById("myImg3");
var modalImg3 = document.getElementById("img03");
var captionText3 = document.getElementById("caption3");
img3.onclick = function() {
modal3.style.display = "block";
modalImg3.src = this.src;
captionText3.innerHTML = this.alt;
}
// Get the 2nd <span> element that closes the modal
var span3 = document.getElementsByClassName("close")[2];
// When the user clicks on <span> (x), close the modal
span3.onclick = function() {
modal3.style.display = "none";
}
* {
box-sizing: border-box
}
/* Set height of body and the document to 100% */
body,
html {
height: 100%;
margin: 0;
font-family: Arial;
}
/* Style tab links */
.tablink {
background-color: #555;
color: white;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
font-size: 17px;
width: 25%;
}
.tablink:hover {
background-color: #777;
}
/* Style the tab content (and add height:100% for full page content) */
.tabcontent {
color: white;
display: none;
padding: 100px 20px;
height: 100%;
}
#Home {
background-color: red;
}
#News {
background-color: green;
}
#Contact {
background-color: blue;
}
#About {
background-color: orange;
}
.myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
.myImg:hover {
opacity: 0.7;
}
/* 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.9);
/* Black w/ opacity */
}
/* Modal Content (image) */
.modal-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 */
.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;
}
/* 100% Image Width on Smaller Screens */
#media only screen and (max-width: 700px) {
.modal-content {
width: 100%;
}
}
<button class="tablink" onclick="openPage('Home', this, 'red')">Home</button>
<button class="tablink" onclick="openPage('News', this, 'green')" id="defaultOpen">News</button>
<button class="tablink" onclick="openPage('Contact', this, 'blue')">Contact</button>
<button class="tablink" onclick="openPage('About', this, 'orange')">About</button>
<div id="Home" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg" src="img_nature.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption" class="caption"></div>
</div>
</div>
<div id="News" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg2" class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal2" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img02">
<div id="caption2" class="caption"></div>
</div>
</div>
<div id="Contact" class="tabcontent">
<h2>Image Modal</h2>
<p>In this example, we use CSS to create a modal (dialog box) that is hidden by default.</p>
<p>We use JavaScript to trigger the modal and to display the current image inside the modal when it is clicked on. Also note that we use the value from the image's "alt" attribute as an image caption text inside the modal.</p>
<img id="myImg3" class="myImg" src="img_snow.jpg" alt="Snow" style="width:100%;max-width:300px">
<!-- The Modal -->
<div id="myModal3" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img03">
<div id="caption3" class="caption"></div>
</div>
</div>
<div id="About" class="tabcontent">
<h3>About</h3>
<p>Who we are and what we do.</p>
</div>

Modal not closing when I click X or outside

The modals I have set up for my website open but do not close when I click the X button or outside.
When I run my code in a browser I can click the button and it works. But then it will not close. I am not sure what the error is or why this does not work.
var modal = document.getElementById("WhiteSedan1")
var btn1 = document.getElementById("BtnWhiteSedan")
var span = document.getElementsByClassName("close")[0];
btn1.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50x;
/* Location of the box */
left: 0;
top: 0;
width: 50%;
/* 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);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="desc">
White Sedan
</div>
<div id="WhiteSedan1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">
Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000
</p>
</div>
</div>
My goal is when I click the X or outside the modal, the modal closes.

I've fixed some problems:
height of the modal, taking the 100% of the space so influencing the click
put a listener on the document, which will trigger the modal if the status is block or if it's the button.
var modal = document.getElementById("WhiteSedan1")
var btn1 = document.getElementById("BtnWhiteSedan")
var span = document.getElementsByClassName("close")[0];
window.onclick = function(event) {
if(btn1.contains(event.target)){
modal.style.display = "block";
}else{
if (!modal.contains(event.target) && modal.style.display === "block" || span.contains(event.target)) {
modal.style.display = "none";
}
}
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50x;
/* Location of the box */
left: 0;
top: 0;
width: 50%;
overflow: auto;
height: auto;
z-index: 1px;
/* Enable scroll if needed */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0);
/* Black w/ opacity */
}
/* Modal Content */
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="desc">
White Sedan
</div>
<div id="WhiteSedan1" class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">
Model: Toyota<br> Mileage: 28,000 km <br> Transmission: Auto<br> Cost: $10,000
</p>
</div>
</div>

I’d suggest combining all opening / closing modal event listeners into one, otherwise multiple event listeners run consecutively, but you only want one action to happen.
One way of achieving this behavior is to check for event.target: if the BtnWhiteSedan element is clicked, open the modal; otherwise, if neither the modal nor anything inside the modal is clicked, with the exception of the × button, close the modal. See Node.prototype.contains.
Since event is only used for event.target, use destructuring to get the target property directly.
const modal = document.getElementById("WhiteSedan1"),
openButton = document.getElementById("BtnWhiteSedan"),
[
closeButton
] = document.getElementsByClassName("close");
addEventListener("click", ({target}) => {
if (target === openButton) {
modal.hidden = false;
}
else if(target !== modal && !modal.contains(target) || target === closeButton){
modal.hidden = true;
}
});
.modal {
position: fixed;
z-index: 1;
padding-top: 50px;
left: 0;
top: 0;
width: 50%;
height: 100%;
overflow: auto;
background-color: rgb(0, 0, 0);
background-color: rgba(0, 0, 0, 0);
}
.modal-content {
background-color: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover, .close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
<div class="desc">
<a id="BtnWhiteSedan" class="btn btn-outline-primary" href="#">White Sedan</a>
</div>
<div id="WhiteSedan1" class="modal" hidden>
<div class="modal-content">
<span class="close">×</span>
<p class="text-center">Model: Toyota<br> Mileage: 28,000 km<br>Transmission: Auto<br> Cost: $10,000</p>
</div>
</div>
It’s not always robust to check for CSS properties. Use the hidden attribute instead, or use a class name and modal.classList.has("hidden"), modal.classList.add("hidden"), modal.classList.remove("hidden"), with .hidden { display: none; } in your CSS. See Element.prototpye.classList. If you do use the hidden attribute, remove the CSS default, and simply add a hidden attribute to your modal as I’ve done in the code above.
I’ve also replaced var by const, onclick by addEventListener, and abstract equality by strict equality. I’ve also used more semantic variable names (e.g. closeButton rather than span).
There was also a typo in your CSS: padding-top: 50x; instead of padding-top: 50px;.

Modal Images With Image Description

Modal Images With Image Description
I found this code on here about making multiple Modal Images.
However I cannot seem to find the best way to add the description text along with it when I open the modal up. I have been following the code on the 2nd to last answer on this post:
Several Modal Images on page
which was helping me a lot but I need description text not caption text.
If anyone is willing to help me solve this it would be much appreciated.
Thank you in Advance!
CODE :
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.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.9);
/* Black w/ opacity */
}
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#text {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content,
#text {
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.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: 700px) {
.modal-content {
width: 100%;
}
}
</style>
</head>
<body>
<img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
<div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
<img class="myImg" src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway" width="300" height="200">
<div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>
<img class="myImg" src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway" width="300" height="200">
<div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div class="text"></div>
</div>
< script >
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImg');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementsByClassName("text");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
} </script>
</body>
</html>

You need to wrap img + text with div so after click on wrapped div then pick inside content by .innerHTML property and change modal img to div.
Just small modification into your js code modalImg.src = this.src to modalImg.innerHTML = this.innerHTML; something like below snippet.
I hope below snippet will help you lot.
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('myImg');
// the image in the modal
var modalImg = document.getElementById("img01");
// and the caption in the modal
var captionText = document.getElementsByClassName("text");
// Go through all of the images with our custom class
for (var i = 0; i < images.length; i++) {
var img = images[i];
// and attach our click listener for this image.
img.onclick = function(evt) {
modal.style.display = "block";
// modalImg.src = this.src;
modalImg.innerHTML = this.innerHTML;
captionText.innerHTML = this.alt;
}
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
*,*:before, *:after{box-sizing: border-box;}
body{
margin: 0;
padding: 0;
font-family: Arial;
}
.myImg{
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
display: inline-block;
vertical-align: top;
width: 300px;
min-height: 200px;
}
.myImg:hover {
opacity: 0.7;
}
.myImg img{
max-width: 100%;
}
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
padding-top: 50px;
/* Location of the box */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: hidden;
overflow-y: 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 {
margin: 0 auto 20px auto;
display: block;
width: 80%;
max-width: 700px;
}
.modal-content img{
width: 100%;
display: block;
}
.modal-content .text{
font-size: 16px;
color: #f1f1f1;
padding: 10px;
}
.modal-content{
animation-name: zoom;
animation-duration: 0.6s;
}
#keyframes zoom {
from {
transform: scale(0)
}
to {
transform: scale(1)
}
}
.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: 700px) {
.modal-content {
width: 100%;
}
}
<div class="myImg">
<img src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway">
<div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
</div>
<div class="myImg">
<img src="http://cdn-image.travelandleisure.com/sites/default/files/styles/1600x1000/public/1490029386/fisherman-cabin-hamnoy-lofoten-islands-norway-NORWAY0320.jpg?itok=cpPuUjh1" alt="Fishermen's cabins in Lofoten, Norway">
<div class="text">The lovely cabins here in Norway was an amazing stay with beautiful scenery...</div>
</div>
<div class="myImg">
<img src="http://fjordtours.blob.core.windows.net/fjordtours-umbraco/1199/gerirangerfjord-per-ottar-walderhaug-fjordnorway.jpg" alt="Gerirangerfjord, Norway">
<div class="text">An afternoon on top of the Norway mountains you get an even more breath taking view..</div>
</div>
<!-- Modal Elements -->
<div id="myModal" class="modal">
<span class="close">×</span>
<div class="modal-content" id="img01"></div>
</div>

It would be far more simple to place image and text in the same container.
<div class="image-container">
<img class="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
<div class="text">The Beautiful mountain over the Norway River was a spectacular view to see..</div>
</div>
Then use JavaScript to declare a variable called modalContent and select your container.
var modalContent = getElementById('image-container');
It just simplifies everything and reduces the number of selectors required. Looking at your code I was having trouble trying to understand if each image displayed in a modal window separately or all together. I hope that this has helped.

Attempting to trigger modals with h2 elements to overlay an animating background. Doesn't work, can someone help see where I went wrong?

As it says in my title, I am trying to trigger modals with javascript by clicking on h2 elements.
When I use inspector to change the modal display mode from none to visible I can see the modal on top of everything else. But clicking on the h2 elements doesn't seem to trigger this action so I assume its a problem with my javascript.
Can anyone help me out here? Can't seem to get it and I'm sure its something dumb.
Here is my code.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Jacob Truax Portfolio</title>
<script src="main.js"></script>
<link rel="stylesheet" href="normalize.css">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="fonts.css">
<script src="jquery.js"></script>
</head>
<body>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>We are a magazine. This is a test.</p>
</div>
</div>
<!-- Button triggering color change -->
<div id="myBtn" class="Btn">
<button></button>
</div>
<!-- main content -->
<div class="main">
<ul>
<li class="fnup">fn-up</li>
<li class="about">about</li>
<li class="issue">issue 0</li>
<li class="contact">contact</li>
</ul>
</div>
<!-- main-2 content overlaid on "main" -->
<div class="main-2">
<h2 id="myButton" class="fnup2">fn-up</h2><br>
<h2 class="about2">about</h2><br>
<h2 class="issue2">issue 0</h2><br>
<h2 class="contact2">contact</h2>
</div>
<!-- section with rotating 3d object -->
<section>
<div class="face face-cover"></div>
<div class="face face-spine"></div>
<div class="face face-back"></div>
<div class="face face-top"></div>
<div class="face face-side"></div>
<div class="face face-bottom"></div>
</section>
</body>
<script src="rotate.js"></script>
<script src="gradient.js"></script>
<script src="rotate-type.js"></script>
<script src="transition.js"></script>
css
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 5; /* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
font-size: 2vw;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
/* End modal ============ */
body {
background-color: #d22c1f;
font-family:"Brrr", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
font-weight: 700;
font-size: 12vw;
overflow: hidden;
perspective: 1500px;
height: 100vh;
width: 100vw;
}
#media only screen and (min-width: 1600px) {
body {
font-size: 210px
}
}
/* a {
opacity: 0;
color: rgba(102, 102, 102, 0);
text-decoration: none;
display: inline-block;
} */
/* the main contet is in 3d space and rotates slightly with the cursor */
.main {
position: relative;
height: 100vh;
width: 100vw;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
}
li {
text-shadow: 4px 4px 40px #000;
color: rgba(102, 102, 102, .3);
padding-left: 60px;
top: -10px;
display: inline-block;
}
/* main-2 is h2 texts overlaid on top of "main" in order to trigger modals */
.main-2 {
position: fixed;
left: 0;
top: 0;
}
h2 {
opacity: 1;
color: rgba(102, 102, 102);
text-decoration: none;
display: inline-block;
padding-left: 60px;
top: -10px;
cursor: pointer;
}
/* This button triggers the background color change */
div.Btn {
position: fixed;
line-height:0;
font-size: 0px;
right: 3vw;
bottom: 3vh;
width: 36px;
height: 36px;
background-image: url(lib/frown.svg);
opacity: 0.3;
mix-blend-mode: overlay;
z-index: 2;
}
div.Btn:hover {
background-image: url(lib/smile.svg);
opacity: 0.3;
mix-blend-mode: overlay;
}
button {
width: 36px;
height: 36px;
border: none;
outline:none;
background: transparent;
border: none !important;
cursor: pointer;
font-size:0;
}
/* section for rotating object following cursor */
section {
position: absolute;
top: 50%;
left: 75vw;
transform-style: preserve-3d;
backface-visibility: hidden;
transform: rotateX(0deg) rotateY(0deg);
z-index: 1;
}
div.face {
position: absolute;
top: 0;
left: 0;
background-size: cover;
}
div.face-cover {
width: 440px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Cover.jpg);
transform: translateX(-50%) translateY(-50%) translateZ(15px);
}
div.face-side {
width: 30px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Side.jpg);
transform: translateX(-50%) translateY(-50%) rotateY(90deg) translateZ(220px);
}
div.face-spine {
width: 30px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Spine.jpg);
transform: translateX(-50%) translateY(-50%) rotateY(-90deg) translateZ(220px);
}
div.face-top {
width: 440px;
height: 30px;
background-image: url(lib/fn-up_Magazine_Top.jpg);
transform: translateX(-50%) translateY(-50%) rotateX(90deg) translateZ(310px);
}
div.face-bottom {
width: 440px;
height: 30px;
background-image: url(lib/fn-up_Magazine_Bottom.jpg);
transform: translateX(-50%) translateY(-50%) rotateX(-90deg) translateZ(310px);
}
div.face-back {
width: 440px;
height: 620px;
background-image: url(lib/fn-up_Magazine_Back.jpg);
transform: translateX(-50%) translateY(-50%) rotateY(180deg) translateZ(15px);
}
Javascript
rotate.js
document.addEventListener("mousemove", function (event) {
const x = event.pageX
const y = event.pageY
const midX = x - window.innerWidth / 3.9
const midY = y - window.innerHeight / 2
const box = document.querySelector('section')
//box.style.left = x + "px"
//box.style.top = y + "px"
box.style.transform = "rotateX(" + (midY * 0.35) + "deg) rotateY(" + (midX * 0.35) + "deg)"
//box.style.transform = "rotateY(" + (midX * 0.4) + "deg)"
})
gradient.js
var angle = -20, color = "#2b2b2b", colors = "#000", font = "rgba(102, 102, 102, .3)", shadow = "4px 4px 40px #000";
var changeBackground = function() {
angle = angle + .3
document.body.style.backgroundImage = "linear-gradient(" + angle + "deg, " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color + ", " + colors + ", " + color;
requestAnimationFrame(changeBackground)
}
var changeFont = function() {
document.querySelectorAll('li').forEach(li => li.style.color = font);
}
var changeShadow = function() {
document.querySelectorAll('li').forEach(li => li.style.textShadow = shadow);
}
changeBackground()
changeFont()
changeShadow();
document.querySelector('#myBtn').addEventListener('click', function () {
color = (color != "#2b2b2b") ? "#2b2b2b" : "#f1f9d4";
colors = (colors != "#000") ? "#000" : "#759ef3";
font = (font != "rgba(102, 102, 102, .3)") ? "rgba(102, 102, 102, .3)" : "rgba(178, 117, 164, .3)";
shadow = (shadow != "4px 4px 40px #000") ? "4px 4px 40px #000" : "4px 4px 40px #fff";
changeFont()
changeShadow();
})
rotate-type.js
document.addEventListener("mousemove", function (event) {
const x = event.pageX
const y = event.pageY
const midX = x - window.innerWidth / 2
const midY = y - window.innerHeight / 2
const type = document.querySelector('.main')
//box.style.left = x + "px"
//box.style.top = y + "px"
type.style.transform = "rotateX(" + (midX * 0.009) + "deg) rotateY(" + (midY * 0.009) + "deg)"
//box.style.transform = "rotateY(" + (midX * 0.4) + "deg)"
})
transition.js (the modal)
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var button = document.getElementById("myButton");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
button.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";
}
}

javascript to zoom images

I cant seem to get this to work. I'm trying to convert a javascript bookmarklet into a javascript onclick function to zoom in on images in the page.
The bookmarklet is as follows...
javascript:(function(){ function zoomImage(image, amt) { if(image.initialHeight == null) { /* avoid accumulating integer-rounding error */ image.initialHeight=image.height; image.initialWidth=image.width; image.scalingFactor=1; } image.scalingFactor*=amt; image.width=image.scalingFactor*image.initialWidth; image.height=image.scalingFactor*image.initialHeight; } var i,L=document.images.length; for (i=0;i<L;++i) zoomImage(document.images[i], 2); if (!L) alert("This page contains no images."); })();
But this is what I have so far but is not working properly...
The JS:
(function vbZoom() {
function zoomImage(image, amt) {
if (image.initialHeight == null) {
image.initialHeight = image.height;
image.initialWidth = image.width;
image.scalingFactor = 1;
}
image.scalingFactor *= amt;
image.width = image.scalingFactor * image.initialWidth;
image.height = image.scalingFactor * image.initialHeight;
}
var i, L = document.images.length;
for (i = 0; i < L; ++i) zoomImage(document.images[i], 2);
if (!L) alert("This page contains no images.");
})();
The Link: (from an image)
<img id="vZoomIn" onclick="vbZoom()">
Please help, anyone.
EDIT: I should note... it partially works. What it currently does is makes images on the page twice as big upon loading but then the button does nothing at all.

Wrapping the function in those brackets means it's called immediately and not available outside the brackets, known as Immediately-invoked function expression, change it to
function vbZoom() {
function zoomImage(image, amt) {
if (image.initialHeight == null) {
image.initialHeight = image.height;
image.initialWidth = image.width;
image.scalingFactor = 1;
}
image.scalingFactor *= amt;
image.width = image.scalingFactor * image.initialWidth;
image.height = image.scalingFactor * image.initialHeight;
}
var i, L = document.images.length;
for (i = 0; i < L; ++i) zoomImage(document.images[i], 2);
if (!L) alert("This page contains no images.");
}
Actually there's a lot that should probably be changed in the code however that should at least work and be available to the rest of the page and not automatically called.

You can use fancybox
use Jquery then use fancybox css & js
use the fancy box html given below, it help to zoom your image as much you want.
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.css">
<a class="hidden-md hidden-lg" href="https://bdtender.com/tenderimage/Feb04/Feb04_BT040221-2A.jpg" data-fancybox="images" data-caption="My caption">
<img src="https://bdtender.com/tenderimage/Feb04/Feb04_BT040221-2A.jpg" style="width:100%; height:auto;" alt="" />
</a>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js">
</script>

var modal = document.getElementById('myModal');
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
modalImg.alt = this.alt;
}
modal.onclick = function() {
img01.className += " out";
setTimeout(function() {
modal.style.display = "none";
img01.className = "modal-content";
}, 400);
}
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
display: block;
margin-left: auto;
margin-right: auto
}
#myImg:hover {opacity: 0.7;}
/* 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.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 75%;
//max-width: 75%;
}
/* 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 */
.modal-content, #caption {
-webkit-animation-name: zoom;
-webkit-animation-duration: 0.6s;
animation-name: zoom;
animation-duration: 0.6s;
}
.out {
animation-name: zoom-out;
animation-duration: 0.6s;
}
#-webkit-keyframes zoom {
from {-webkit-transform:scale(1)}
to {-webkit-transform:scale(2)}
}
#keyframes zoom {
from {transform:scale(0.4)}
to {transform:scale(1)}
}
#keyframes zoom-out {
from {transform:scale(1)}
to {transform:scale(0)}
}
/* 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: 700px){
.modal-content {
width: 100%;
}
}
<img id="myImg" src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3/journey_start_thumbnail.jpg" alt="Trolltunga, Norway" width="500" height="300">
<!-- The Modal -->
<div id="myModal" class="modal">
<img class="modal-content" id="img01">
</div>