I'm trying to make a grid of photos that when hovered over display a button that can be used to open a modal. After successfully getting one photo to function this way, I tried to start introducing more photos, but now I can't open the modal from the first button any more.
Here's the code I'm using so far for reference:
</style>
</head>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 1</h3>
<p>Modal Text 1
</p>
</div>
</div>
<div class="container">
<img src="https://previews.dropbox.com/p/thumb/ABFh1yeARivImN6pNH7kuatn60gVuTBKQO9dbkUPSa2nQQWvlgOMt4GIkI5ZlWvHDV1jhXJQ1JqmPPSRwqdwDZ360SPlxnHG7as4GypQWPvCGa0_IiZ8MY-dxF3qQ3azldvGF3P3pFUVOe5oi0pL4cTQiLbj4wqyX7f-SSYaVwD88sU8B-avSdROijI0_3zOecUEfMl9Hrx3uWviDREGperqRhJ7-YaB1VM-LRPh5ESKN92YeEdpM41tIIUL-CAbzcffQYNncc-XUi8TMpOdLL2lvH_s6W1kH70H4PuEt8b0fn5I6oAg8ami7_6GJSK4nPUYxWbrbqiAgrmv2U-7aYeWhtkiRf0l8JDGoP9BVblqcg/p.jpeg?fv_content=true&size_mode=5" alt="Fiona Garufi" style="width:100%">
<button1 id="myBtn1" class="btn">Button Text 1</button>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2-->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 2</h3>
<p>Modal Text 2
</p>
</div>
</div>
<div class="container">
<img src="https://previews.dropbox.com/p/thumb/ABFh1yeARivImN6pNH7kuatn60gVuTBKQO9dbkUPSa2nQQWvlgOMt4GIkI5ZlWvHDV1jhXJQ1JqmPPSRwqdwDZ360SPlxnHG7as4GypQWPvCGa0_IiZ8MY-dxF3qQ3azldvGF3P3pFUVOe5oi0pL4cTQiLbj4wqyX7f-SSYaVwD88sU8B-avSdROijI0_3zOecUEfMl9Hrx3uWviDREGperqRhJ7-YaB1VM-LRPh5ESKN92YeEdpM41tIIUL-CAbzcffQYNncc-XUi8TMpOdLL2lvH_s6W1kH70H4PuEt8b0fn5I6oAg8ami7_6GJSK4nPUYxWbrbqiAgrmv2U-7aYeWhtkiRf0l8JDGoP9BVblqcg/p.jpeg?fv_content=true&size_mode=5" alt="Fiona Garufi" style="width:100%">
<button1 id="myBtn2" class="btn">Button Text 2</button>
</div>
</div>
</div>
<script>
// Get the first modal
var modal = document.getElementById("myModal1");
// Get the first button that opens the modal
var btn = document.getElementById("myBtn1");
// Get the second modal
var modal = document.getElementById("myModal2");
// Get the second button that opens the modal
var btn = document.getElementById("myBtn2");
// 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>
</body>
</html>
<html>
<head>
<style>
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #673589;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
width: 100%;
max-width: 400px;
transition: .4s ease;
}
.container img {
width: 100%;
height: auto;
opacity: 1;
}
.btn {
position: absolute;
top: 70%;
left: 50%;
transition: .4s ease;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgba(235,235,235,.5);
opacity: 0;
color: #351B47;
font-size: 20px;
font-family: "Raleway";
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
id: "myBtn";
}
.container:hover .btn{
opacity: 1;
}
.container:hover {
opacity: .75;
}
opacity: 1;
}
Since your using the id in your javascript your only binding the modal only once in the DOM, change it to use the class name instead, I would also recommend improving your CSS
// Get the button that opens the modal
var btn = document.querySelectorAll("button.btn");
// All page modals
var modals = document.querySelectorAll('.modal');
// Get the <span> element that closes the modal
var spans = document.getElementsByClassName("close");
// When the user clicks the button, open the modal
for (var i = 0; i < btn.length; i++) {
btn[i].onclick = function(e) {
e.preventDefault();
modal = document.querySelector(e.target.getAttribute("href"));
modal.style.display = "block";
}
}
// 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";
}
}
}
.row {
display: -ms-flexbox; /* IE10 */
display: flex;
-ms-flex-wrap: wrap; /* IE10 */
flex-wrap: wrap;
padding: 0 4px;
}
/* Create four equal columns that sits next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
width: 100%;
}
/* Responsive layout - makes a two column-layout instead of four columns */
#media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
#media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 100%;
}
}
/* 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: #fefefe;
margin: auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
}
/* The Close Button */
.close {
color: #673589;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.container {
position: relative;
width: 100%;
max-width: 400px;
transition: .4s ease;
}
.container img {
width: 100%;
height: auto;
opacity: 1;
}
.btn {
position: absolute;
top: 70%;
left: 50%;
transition: .4s ease;
transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
background-color: rgba(235,235,235,.5);
opacity: 0;
color: #351B47;
font-size: 20px;
font-family: "Raleway";
padding: 16px 30px;
border: none;
cursor: pointer;
border-radius: 5px;
text-align: center;
id: "myBtn";
}
.container:hover .btn{
opacity: 1;
}
.container:hover {
opacity: .75;
}
opacity: 1;
}
<html>
<head>
</head>
<body>
<!-- Photo Grid -->
<div class="row">
<div class="column">
<!-- The Modal -->
<div id="myModal1" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 1</h3>
<p>Modal Text 1
</p>
</div>
</div>
<div class="container">
<img src="https://via.placeholder.com/150" alt="Fiona Garufi" style="width:100%">
<button href="#myModal1" id="myBtn1" class="btn">Button Text 1</button>
</div>
<!-- The Modal 2-->
<div id="myModal2" class="modal">
<!-- Modal content 2-->
<div class="modal-content">
<span class="close">×</span>
<h3>Modal Title 2</h3>
<p>Modal Text 2
</p>
</div>
</div>
<div class="container">
<img src="https://via.placeholder.com/150" alt="Fiona Garufi" style="width:100%">
<button href="#myModal2" id="myBtn2" class="btn">Button Text 2</button>
</div>
</div>
</div>
</body>
</html>
Related
I am trying to understand how to make my current 'modal' code allow for a minimize and maximize button where the modal would minimize to the bottom of the screen when clicking the - button and in the little rectangle at the bottom allow for clicking the + button to bring it back.
Basically I want it to work the same as a browser where you minimize things to the bottom of the desktop, but in this case our application.
HTML
<button id="phq_btn" ng-click="openModalBtn('phq_modal','modal-overlay')">PHQ Open Modal</button>
<div id="modal-overlay">
<!--PHQ Modal-->
<div id="phq_modal" class="modal">
<!-- PHQ Modal content -->
<div class="modal-content">
<!--Allow Scroll-->
<div class="modal-scroll">
<!--Allow Dragging of Header-->
<div class="modal-header">
<div layout ="row" class="titleHolder" style ="height: 25px; width: 100%" >
<div layout="column" flex="33">PHQ-9</div>
<div layout="column" style="color: rgb(255, 255, 255)" layout-align="end end" flex="100"><span ng-click="closeModalBtn('phq_modal','modal-overlay')" style="margin-bottom:7px" class="close">×</span></div>
</div>
</div>
CONTENT GOES HERE.
</div>
</div>
</div>
</div>
CSS
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 999; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
z-index: 999;
/*
background-color: rgb(0,0,0); /* Fallback color
background-color: rgba(0,0,0,0.4); /* Black w/ opacity
*/
}
/* Modal Content/Box */
.modal-content {
padding: 10px;
background-color: #fefefe;
margin: 5% auto; /* 15% from the top and centered */
border: 1px solid #888;
border-radius: 10px;
height: 70%;
width: 80%; /* Could be more or less, depending on screen size */
pointer-events:all;
z-index: 999;
}
/* Modal Scroll Content*/
.modal-scroll {
overflow-y: scroll !important;
background-color: #fefefe;
height: 100%;
width: 100%;
pointer-events:all;
}
.modal-header{
cursor: pointer;
}
/* The Close Button */
.close {
color: #f7f3f3;
float: right;
font-size: 28px;
font-weight: 600;
cursor: pointer;
height: 15px;
width: 20px;
text-align: right;
pointer-events:all;
}
.close:hover,
.close:focus {
color: white;
text-decoration: none;
cursor: pointer;
}
.modal-overlay-on {
z-index: 1000;
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.5);
transition: opacity 200ms;
opacity: 1;
pointer-events: none;
cursor: default;
}
JS
//Open Modal
$scope.openModalBtn = function(modal,overlay){
eval(modal + '.style.display = "block"');
eval("$('#" + overlay + "').addClass('modal-overlay-on')");
};
//Close Modal
$scope.closeModalBtn = function(modal,overlay){
eval(modal + '.style.display = "none"');
eval("$('#" + overlay + "').removeClass('modal-overlay-on')");
};
//Drag Modal
$(".modal").draggable({
handle: ".modal-header"
});
//Disable Click outside of Modal
window.onclick = function(event) {
if (event.target == phq_modal) {
phq_modal.style.display = "none";
}
};
i'm new here, i begginer and i have problem with my project.
I used template "Landed" https://html5up.net/landed - i modyfing it, and i have problem with adding a functionality: full size modal for images.
I just need to make full size modal after clicking image.
It would be nice if also images were cropped to same size, and user click to it to see full picture.
I need it for showing my graphic portfolio.
I tried to add this code by #snowMonkey
https://jsfiddle.net/snowMonkey/f1zav0ge/
I asked my friends, but they dont know what to do.
I tired many ways (changing in javaScript, and messing with classes), but i cannot achive what i want.
It works without styling <div class="col-4 col-6-xsmall"><span class="image fit"> but shadow makes from to end page - i need shadow to full page.
if i add to code this styling i see just black after choosing image, or sometimes "undefined".
Could someone help me?
Thanks.
Codes
HTML:
<section>
<div class="box alt">
<div class="row gtr-50 gtr-uniform">
</div>
</section>
<!--
<section>
<img class="myImages" id="myImg" src="http://onebigphoto.com/uploads/2012/10/midnight-sun-in-lofoten-norway.jpg" alt="Midnight sun in Lofoten, Norway" width="300" height="200">
<img class="myImages" id="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">
<img class="myImages" id="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 id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
CSS:
/* modal */
#myImg {
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
#myImg:hover {
opacity: 0.7;
}
.modal {
overflow-y: none;
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;
}
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
}
.modal-content,
#caption {
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%;
}
}
/*koniec*/
/* Image */
.image {
border-radius: 4px;
border: 0;
display: inline-block;
position: relative;
overflow: hidden;
cursor: pointer;
}
.image:hover {opacity: 0.7;}
.image:before {
content: '';
display: block;
position: absolute;
left: 0;
top: 0;
/*background-image: url("images/overlay.png");*/
width: 100%;
height: 100%;
z-index: 1;
}
.image img {
border-radius: 4px;
display: block;
}
.image.left {
float: left;
margin: 0 1.5em 1em 0;
top: 0.25em;
}
.image.right {
float: right;
margin: 0 0 1em 1.5em;
top: 0.25em;
}
.image.left, .image.right {
max-width: 40%;
}
.image.left img, .image.right img {
width: 100%;
}
.image.fit {
display: block;
margin: 0 0 2em 0;
width: 100%;
}
.image.fit img {
width: 100%;
}
.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%;
}
}
JS:
// create references to the modal...
var modal = document.getElementById('myModal');
// to all images -- note I'm using a class!
var images = document.getElementsByClassName('col-4 col-6-xsmall');
// the image in the modal
var modalImg = document.getElementById("image fit");
// and the caption in the modal
var captionText = document.getElementById("caption");
// 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) {
console.log(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";
}
I have problem with popup in my divi page.
I created popup then implemented same in my home page but my popup disappear then i scroll down for example:
Like you see my popup are after img. And this is not looking good right, i wanna fix it.
my code:
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
body {font-family: Arial, Helvetica, sans-serif;}
* {box-sizing: border-box;}
/* Button used to open the contact form - fixed at the bottom of the page */
.open-button {
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
left: 5px;
width: 280px;
}
/* The popup form - hidden by default */
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Add styles to the form container */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Full-width input fields */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* When the inputs get focus, do something */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Set a style for the submit/login button */
.form-container .btn {
background-color: #4CAF50;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: #f2835a;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<div class="open-button"
<div class="form-popup" id="myForm">
<form action="/action_page.php" class="form-container">
<h1>Patalpų dezinfekcija beta</h1>
<h4>Patalpų dezinfekcija beta - 70ct/kv.m </h4>
<h4>tel. +54645654656 <br>
el. p. 45646#45645654.com </h4>
<button type="button" class="btn cancel" onclick="closeForm()">Uždaryti</button>
</form>
</div>
</div>
</body>
</html>
I cant found solution on my own. Please any info how to solve this issue will be very nice.
Actually i dont understand what you are trying to say. So please use
below CSS and HTML for your reference. There you can edit the modal as
per your requirement.
/* 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: #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;
}
/*** Html part ***/
<body>
<!-- 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>Some text in the Modal..</p>
</div>
</div>
<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>
</body>
First off, I am new to coding. I am trying to put two gifs side by side that when clicked on expand into a pop up window and the videos are enlarged. I have succeeded in getting the images side by side. The first gif expands when clicked on and acts how I want it to. But the second gif does not. I believe it has to do with the 's both being the same, but I am not sure how to go about using a class or multiple ids to make the modal work correctly. Some help would be much appreciated! Attached is my code.
// 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";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/*Image Loops*/
#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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img id="myImg" src="image.gif" alt="img" text-align="center" style="width:100%"><br>
</div>
<div class="column">
<img id="myImg" src="image2.gif" alt="image2" text-align="center" style="width:100%"><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
First of all this part here :
var img = document.getElementById("myImg");
is getting only first element with this ID. ID should be unique.
The solution to this would be using a class instead but there's a problem with that approach. The problem is when you get elements by Classname it returns HTML collection to which you can't bind an event without looping it which would make things complicated.
So the best solution to this instead of binding an event use onClick as an attribute and call a function.
Solution
var modal = document.getElementById('myModal');
// Get the image and insert it inside the modal - use its "alt" text as a caption
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
function modalOpen(src,alt){
modal.style.display = "block";
modalImg.src = src;
captionText.innerHTML = 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";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
.caption{
text-align:center
}
/*Image Loops*/
#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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/128x128" alt="img" text-align="center" style="width:100%"><p class="caption">img</p><br>
</div>
<div class="column">
<img id="myImg" onclick="modalOpen(this.src,this.alt)" src="http://via.placeholder.com/129x129" alt="image2" text-align="center" style="width:100%"><p class="caption">image2</p><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
I do not have the actual images, but I believe this should work.
// Get the modal
const modal = document.getElementById('myModal');
const modalImg = document.getElementById("img01");
const captionText = document.getElementById("caption");
document.addEventListener('click', (event) => {
if (event.target.matches('img')) {
loadModalImage(event.target);
}
}, false);
const loadModalImage = (target) => {
modal.style.display = "block";
modalImg.src = target.src;
captionText.innerHTML = target.alt;
}
// Get the <span> element that closes the modal
const span = document.getElementsByClassName("close")[0];
// When the user clicks on <span> (x), close the modal
span.onclick = () => {
modal.style.display = "none";
}
.column {
float: left;
width: 50%;
padding: 5px;
}
/* Clearfix (clear floats) */
.row::after {
content: "";
clear: both;
display: table;
}
/*Image Loops*/
.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: 1600px;
height: 800px;
}
/* Caption of Modal Image */
#caption {
margin: auto;
display: block;
width: 80%;
max-width: 700px;
text-align: center;
color: #ccc;
padding: 10px 0;
height: 150px;
font-size: 20px;
}
/* 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: white;
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%;
}
}
<div class="row">
<div class="column">
<img class="myImg" src="https://picsum.photos/100/100" alt="img" text-align="center" style="width:100%"><br>
</div>
<div class="column">
<img class="myImg" src="https://picsum.photos/100/100" alt="image2" text-align="center" style="width:100%"><br>
</div>
</div>
<!-- The Modal -->
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
Trying to create a page with multiple pictures, as you click on each it zooms in using a modal. This code worked great for 1 picture, but as I added several more, only the first works. Please advise.
// Zoom in Affect
// 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("img"); <!-- ? -->
var captionText = document.getElementById("caption"); <!-- ? -->
img.onclick = function(){ <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; <!-- ? -->
modalImg.src = this.src; <!-- ? -->
modalImg.alt = this.alt; <!-- ? -->
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";
}
#myImg {
cursor: pointer;
transition: 0.3s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 3px solid #7DAFE7;
}
#myImg:hover {
opacity: 0.7; /* How much image changes when moving mouse over it */
border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
display: none; /* ? */ /* Hidden by default */
position: fixed; /* ? */ /* Stay in place */
z-index: 1; /* ? */ /* Sit on top */
padding-top: 100px; /* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; /* Width of picture inside modal? */
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;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
width: 100%;
/*background-color: #0200FF;*/
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
position: relative;
}
.imgPicture {
width: 90%;
}
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
You need to attach an event listener to each of the elements, since there are multiple instances. Also, it's good practice to use classes instead of IDs when creating multiple instances of an element (unless, as #mmm suggests, they are unique).
// Zoom in Affect
// 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.getElementsByClassName('imgPicture'); <!-- ? -->
var modalImg = document.getElementById("img"); <!-- ? -->
var captionText = document.getElementById("caption"); <!-- ? -->
for (var i=0; i<img.length; i++) {
img[i].addEventListener('click', function(){ <!-- when you click on var img (which equals id="myImg", which is the original img? -->
modal.style.display = "block"; <!-- ? -->
modalImg.src = this.src; <!-- ? -->
modalImg.alt = this.alt; <!-- ? -->
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";
}
#myImg {
cursor: pointer;
transition: 0.3s;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border: 3px solid #7DAFE7;
}
#myImg:hover {
opacity: 0.7; /* How much image changes when moving mouse over it */
border: 3px solid #137709;
}
/* The Modal (background) */
.modal {
display: none; /* ? */ /* Hidden by default */
position: fixed; /* ? */ /* Stay in place */
z-index: 1; /* ? */ /* Sit on top */
padding-top: 100px; /* Pixels the zoomed image is from the top of the screen */ /* 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); /* ? not sure why there's 2 background-color */ /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}
/* Modal Content (image) */
.modal-content {
margin: auto;
display: block;
width: 80%; /* Width of picture inside modal? */
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;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
}
.close:hover,
.close:focus {
color: #bbb;
text-decoration: none;
cursor: pointer;
}
.picture {
width: 100%;
/*background-color: #0200FF;*/
padding-left: 5%;
padding-right: 5%;
padding-top: 5%;
position: relative;
}
.imgPicture {
width: 90%;
}
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-1.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>
<div class="picture">
<img class="imgPicture" id="myImg" src="photo-2.jpg">
<div id="myModal" class="modal">
<span class="close">X</span> <img id="img" class="modal-content">
<div id="caption"></div>
</div>
</div>