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>

How to make JS/Jquery perspective effect work inside modal?

How can I get this effect below to happen inside the modal? I have tried a bunch of methods and it seems like I am missing something. When I put all of the content in the .wrap div inside the "MODAL CONTENT" div it no longer shows anywhere. Then when I correct the css to target the modal properly #myModal modal-content .wrap {... the content just shows up as images next to each other.. I'm completely lost as to why that is happening? Can someone explain how I can make this work inside the modal pls?
var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 30;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
});
moveBackground();
//////////////////////////////////////////////////MODAL/////////////////////////////////////////////////////////////
// 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 on 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";
}
}
body {
height: 100vh;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
color: white;
font-size: 7vmin;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wrap {
background-color: #0F2044;
-webkit-perspective: 100px;
perspective: 100px;
height: 100%;
position: relative;
overflow: hidden;
}
.wrap .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: black;
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
/* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>MODAL CONTENT</p>
</div>
</div>
<div class="wrap">
<div class="bg">
<img class="front" src="https://shannels.com/fg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/mg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/bg.svg">
</div>
</div>
</div>
</div>

Move your wrapper inside the modal content then you need to make it position:absolute and make the modal content position:relative then adjust z-index and width/height
var lFollowX = 0,
lFollowY = 0,
x = 0,
y = 0,
friction = 1 / 30;
function moveBackground() {
x += (lFollowX - x) * friction;
y += (lFollowY - y) * friction;
translate = 'translate(' + x + 'px, ' + y + 'px) scale(1.1)';
$('.bg').css({
'-webit-transform': translate,
'-moz-transform': translate,
'transform': translate
});
window.requestAnimationFrame(moveBackground);
}
$(window).on('mousemove click', function(e) {
var lMouseX = Math.max(-100, Math.min(100, $(window).width() / 2 - e.clientX));
var lMouseY = Math.max(-100, Math.min(100, $(window).height() / 2 - e.clientY));
lFollowX = (20 * lMouseX) / 100; // 100 : 12 = lMouxeX : lFollow
lFollowY = (10 * lMouseY) / 100;
});
moveBackground();
//////////////////////////////////////////////////MODAL/////////////////////////////////////////////////////////////
// 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 on 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";
}
}
body {
height: 100vh;
}
h1 {
margin: 0;
padding: 0;
position: absolute;
top: 50%;
left: 50%;
color: white;
font-size: 7vmin;
text-align: center;
text-transform: uppercase;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
}
.wrap {
background-color: #0F2044;
-webkit-perspective: 100px;
perspective: 100px;
height: 100%;
width: 100%;
position: absolute;
overflow: hidden;
top:0;
left:0;
z-index:-1;
}
.wrap .bg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: -1;
-webkit-transform: scale(1.1);
transform: scale(1.1);
}
/* The Modal (background) */
.modal {
display: none;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 1;
/* Sit on top */
left: 0;
top: 0;
width: 100%;
/* Full width */
height: 100%;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: black;
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%;
position:relative;
/* Could be more or less, depending on screen size */
z-index:0;
color:#fff;
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="wrap">
<div class="bg">
<img class="front" src="https://shannels.com/fg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/mg.svg">
<div class="bg">
<img class="front" src="https://shannels.com/bg.svg">
</div>
</div>
</div>
</div>
<span class="close">×</span>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
<p>MODAL CONTENT</p>
</div>
</div>

My guess is that the content is showing up in the modal, but it's getting cropped. Try adding a specific height to .wrap or .modal-content (note 100% won't work because the parent and the absolutely positioned children have no height).
.wrap {
background-color: #0F2044;
-webkit-perspective: 100px;
perspective: 100px;
position: relative;
overflow: hidden;
// Add something like this
height: 50vh;
}
Also, if you were trying to target it with #myModal modal-content .wrap {..., as you said above, you're missing a class selector (.) before modal-content. Should be #myModal .modal-content .wrap {...

modal image based on radio selet as array index

I have this very close but not quite. What I am looking for is to cycle images based on a radio button selection, this works fine. I would also like a modal on click of the image, so if I select radio selection 1, image name from the array shows and is clickable to a modal, similarly for each other radio option. Again, this is working fine. what is not is the modal pop up based on the radio button image.
Here is the css used:
#piGal ul {
float: left;
list-style-type: none;
padding: 20px 2em 3em 2em;
}
#piGal img {
max-width: 100%;
height: auto;
padding: .5em .5em 2em .5em;
}
#piGal .outer {
float: left;
padding-bottom: 5px;
}
#piGalImg img {
max-width: 100%;
height: auto;
-webkit-box-shadow: 0px 0px 1px #000;
-moz-box-shadow: 0px 0px 1px #000;
padding-bottom: 5px;
}
#piGalImg .outer {
float: left;
padding-bottom: 5px;
}
/* Style the Image Used to Trigger the Modal */
#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 (Image Text) - Same Width as the Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
/* Add Animation - Zoom in the Modal */
.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%;
}
}
The radio button (simplified) is as follows:
<div class="contentText">
<section>
<h5>Choose color</h5>
<ul id="radio-attribute" class="radio-attribute">
<li class="radio-attribute">
<label for="1" class="radio-attribute">
<input type="radio" id="1" name="id[27]" value="170" onClick="change_image(this.id)">
<img src="images/silver_swatch.png" alt="GBM0911S Silver" title=" GBM0911S Silver " width="42" height="40" />
</label>
</li>
<li class="radio-attribute">
<label for="2" class="radio-attribute">
<input type="radio" id="2" name="id[27]" value="175" onClick="change_image(this.id)">
<img src="images/blue_swatch.png" alt="GBM0911B Blue" title=" GBM0911B Blue " width="45" height="40" />
</label>
</li>
</ul>
</section>
</div>
And the javascript is as follows:
<script type="text/javascript">
<!--
var images = ["GLAMOURFRONT.jpg","GBM0911S.png"];
function preload(arrayOfImages) {
$(arrayOfImages).each(function () {
$('<img />').attr('src',this).appendTo('body').css('display','none');
});
}
preload(images);
var galleryImage = document.querySelector("#piGalImg")
var modal = document.getElementById('myModal');
var img = document.getElementById('piGal');
var modalImg = document.getElementById("piGal");
var captionText = document.getElementById("caption");
function change_image(radioID) {
var imageID = radioID;
document.getElementById("piGal").innerHTML = "<img id=\"myImg\" src=\"images/"+ images[radioID] +"\" />";
}
// Get the modal
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";
}
document.getElementById("piGal").onclick = function(){
modal.style.display = "block";
modalImg.src = "<img id=\"piGal\" src=\"images/"+ images[imageID] +"\" />";
captionText.innerHTML = this.alt;
}
document.querySelectorAll('label.radio-attribute img').forEach(function (radioClick) {
radioClick.addEventListener("click", function () {
// modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
});
});
//-->
</script>
The image rotates based on the radio selection without issue, the modal though shows the radio image name verses the image from the image array position. I use the radio ID to determine the array element (image name) to use for the modal pop up, it is this part that is not working well.
https://jsfiddle.net/8c09e9j0/

You have multiple elements on the page with the same id="piGal", so modalImg.src is trying to set the src on the first element with an id of pieGal, which is not the image element in your modal. id's must be unique. Change your modal ID to something unique to ensure you're trying to modify the correct element.
<img class="modal-content" id="piGalImg">
var modalImg = document.getElementById("piGalImg");
If your images are stored in an array store the index in a data-attribute on the image with the event listener and access the image array directly:
HTML:
<img src="https://placebear.com/10/20" data-arrayid="0" alt="GBM0911B Blue" title=" GBM0911B Blue " width="45" height="40" />
JS:
images = [
'400/400.jpg',
'400/500.jpg'
]
modalImg.src = 'https://placebear.com/' + images[this.dataset.arrayid];
Try this pen:
https://codepen.io/benjaminwfox/pen/yPNEWG

How to open a popup image for completely different image using javascript?

I have two images to use for instance rose.jpg and mary.jpg. I need to pop up mary.jpg once I click to rose.jpg. I am trying to use modal in here. I know how to do it if the pop image is same as the image to be clicked but in this case my bigger image has a completely different name. I have seen multiple other examples which describes about popup window or form but not image in itself while clicking the image.
Following is what I have done so far. It works only for same image:
<html>
<head>
<style>
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {opacity: 0.7;}
.modal {
display: none;
position: fixed;
z-index: 1; /* Sit on top */
padding-top: 100px; /* Location of the box */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.9);
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.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;
}
</style>
</head>
<body>
<img id="myImg" src="rose.jpg" alt="flower" >
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="mary.jpg" alt="mary" id="img01">
<div id="caption"></div>
</div>
<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;
captionText.innerHTML = this.alt;
}
var span = document.getElementsByClassName("close")[0];
span.onclick = function() {
modal.style.display = "none";
}
</script>
</body>
</html>
In this example modalImg.src = this.src; is what it is getting the original image to pop up instead of the other image. I need to display mary.jpg which I had given source as <img class="modal-content" src="mary.jpg" alt="mary" id="img01">. Please help.

In your onclick function you are setting the img src as equal to this.src
img.onclick = function(){
modal.style.display = "block";
modalImg.src = this.src;
captionText.innerHTML = this.alt;
}
By doing so, in this use case, every time you click the image you are setting the img src to rose.jpg.
If you remove modalImg.src = this.src; then your modal should just simply 'open', by displaying block onclick, and displaying your HTML, which already defines the img src.
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" src="mary.jpg" alt="mary" id="img01">
<div id="caption"></div>
</div>

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>