Develop Reference

Side-By-Side Gifs That Expand When Clicked

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>

Only one Modal box pop-up - Javascript

This is my code. The first "open modal" button works, but the 2nd button do not work.
// 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";
}
}
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<button id="myBtn">Open Modal</button>
<!-- Login Modal Box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login to continue</h2>
</div>
<div class="modal-body">
<p>Sorry but, you need to login in order to add this movie into your watchlist. </p>
<p>Some other text...</p>
</div>
</div>
</div>
I think it is because of same id's, but what changes I need to make in the Javascript in order for the code to work?

You cannot use same ID for both buttons. Instead you can use different IDs. But since both buttons serve same purpose, use same class and bind the click function using that class.

// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
$('.myBtn').bind('click',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";
}
}
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {padding: 2px 16px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!-- Trigger/Open The Modal -->
<button class="myBtn">Open Modal</button>
<button class="myBtn">Open Modal</button>
<!-- Login Modal Box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login to continue</h2>
</div>
<div class="modal-body">
<p>Sorry but, you need to login in order to add this movie into your watchlist. </p>
<p>Some other text...</p>
</div>
</div>
</div>
You should replace an id of buttons by class
<button class="myBtn">Open Modal</button>
<button class="myBtn">Open Modal</button>
and use class selector to bind click event
var btns = document.getElementsByClassName("myBtn");
or using jquery
$('.myBtn').onClick(function(){
modal.style.display = "block";
})

Sorry to say this but you can't or Shouldn't use more than one id in an HTML page. It's wrong to its respective syntax. If want the same name, use class it's ok to use multiple class on a page but not multiple ID.
try using:
<button class="myBtn">Open Modal</button>
<button class="myBtn">Open Modal</button>
and
var btns = document.getElementsByClassName("myBtn");
btn.onclick = function() {
modal.style.display = "block";
}

// Get the modal
var modal = document.getElementById('myModal');
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function openModal() {
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";
}
}
/* 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 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal-body {
padding: 2px 16px;
}
<!-- Trigger/Open The Modal -->
<button onclick="openModal()">Open Modal</button>
<button onclick="openModal()">Open Modal</button>
<!-- Login Modal Box -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h2>Login to continue</h2>
</div>
<div class="modal-body">
<p>Sorry but, you need to login in order to add this movie into your watchlist. </p>
<p>Some other text...</p>
</div>
</div>
</div>

How to make modal box as responsive?

I have implemented this CSS-based modal box. It works perfect, and it is quite easy to use.However, it is not responsive. how can we make its responsive?
pls help.
<!DOCTYPE html>
<html>
<head>
<style>
/* The Modal (background) */
.modal4 {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
/* Modal content1 */
.modal4-content2 {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal4-header2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
.modal4-body {padding: 2px 16px;}
.modal4-footer2 {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
</style>
</head>
<body>
<h2>Animated Modal with header1 and footer1</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn4">Open Modal</button>
<!-- The Modal -->
<div id="myModal4" class="modal4">
<!-- Modal content1 -->
<div class="modal4-content2">
<div class="modal4-header2">
<span class="close">×</span>
<h2>Modal header1</h2>
</div>
<div class="modal4-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal4-footer2">
<h3>Modal footer1</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal4 = document.getElementById('myModal4');
// Get the button that opens the modal
var btn = document.getElementById("myBtn4");
// 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() {
modal4.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal4.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal4) {
modal4.style.display = "none";
}
}
</script>
</body>
</html>

Your code is responsive... But if you still didn't get responsiveness then add below meta tag in head:
<meta name="viewport" content="width=device-width, initial-scale=1">

Multiple Javascript Modals

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>

In need of a fade out animation for my modal window code

I just started scripting, and I can't figure out how to add a fade out animation (the same one as the fade in animation ) when closing the modal window.
Here is a link to the project: https://jsfiddle.net/myosis/kb0o27vy/
I like everything about it, it only needs a closing animation.
Can someone help me out!?
:)
<!DOCTYPE html>
<html>
<head>
<style>
/* 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(255, 255, 255); /* Fallback color */
background-color: rgba(255, 255, 255.4); /* Black w/ opacity */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 5.4s;
animation-name: fadeIn;
animation-duration: 5.4s;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 0px;
width: 822px;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.02),0 6px 20px 0 rgba(0,0,0,0.02);
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
#keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
-webkit-animation-name: fadeOut; /* Fade in the background */
-webkit-animation-duration: 5.4s;
animation-name: fadeOut;
animation-duration: 5.4s
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
color: #5B5B5B;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
}
.modal-body {
width: 538px;
color: #7A7A7A;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
position: relative;
}
.modal-footer {
padding: 2px 16px;
background-color: #ffffff;
color: blac;
}
/* Add Animation */
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#-webkit-keyframes fadeOut {
from {opacity: 1}
to {opacity: 0}
}
</style>
</head>
<body>
<h2>Animated Modal with Header and Footer</h2>
<!-- 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="modal-header">
<span class="close">×</span>
<div class="clearfix grpelem" id="u1562-4"><!-- content -->
<p>test</p>
</div>
</div>
<div class="clearfix colelem" id="u1567-4"><!-- content -->
<p>test</p>
</div>
<div class="colelem" id="u1568"><!-- simple frame --></div>
<div class="clearfix colelem" id="u1566-4"><!-- content -->
<p>test</p>
</div>
<div class="clip_frame colelem" id="u1556"><!-- image -->
<img class="block" id="u1556_img" src="" alt="" width="823" height="1024"/>
</div>
<div class="modal-footer">
<h3>-</h3>
</div>
</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>
</html>

If you do not want to use jQuery, here is a quick solution. I have added a setTimeout with the duration time of the CSS and after this timeout, the modal is set to display: none;. Before the setTimeout I have added an animation class to fadeOut the Modal.
// Get the modal
var modal = document.getElementById('myModal');
// Get the overlay
var overlay = document.getElementById('modalOverlay');
// 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.className = modal.className.replace(/ modalClose/g, '');
overlay.className = overlay.className.replace(/ modalClose/g, '');
modal.style.display = "block";
overlay.style.display = "block";
};
overlay.onclick = function() {
modal.className = modal.className + ' modalClose';
overlay.className = overlay.className + ' modalClose';
setTimeout(function() {
modal.style.display = "none";
overlay.style.display = "none";
}, 300);
};
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.className = modal.className + ' modalClose';
overlay.className = overlay.className + ' modalClose';
setTimeout(function() {
modal.style.display = "none";
overlay.style.display = "none";
}, 300);
};
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
};
body, html {
width: 100%;
}
.u1568 {
z-index: 23;
width: 200px;
background-color: transparent;
color: #5B5B5B;
line-height: 36px;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
margin-right: -10000px;
left: 25px;
}
.u1567-4 {
z-index: 31;
width: 200px;
background-color: transparent;
color: #9E9E9E;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
font-style: italic;
margin-left: 49px;
margin-top: 9px;
position: relative;
}
#u1568 {
z-index: 35;
width: 538px;
height: 1px;
border-width: 0px;
border-color: transparent;
background-color: #E2E2E2;
margin-left: 49px;
margin-top: 4px;
position: relative;
}
/* The Modal (background) */
#modalOverlay {
position: fixed;
background-color: rgba(0,0,0,0.1);
width: 100%;
height: 100%;
left: 0;
top: 0;
right: 0;
display: none;
z-index: 99;
}
.modal {
display: none;
opacity: 0;
/* Hidden by default */
position: fixed;
/* Stay in place */
z-index: 100;
/* Sit on top */
padding-top: 100px;
/* Location of the box */
left: 50%;
top: 50%;
width: 300px;
height: 300px;
overflow: auto;
margin-left: -150px;
margin-top: -150px;
/* Full height */
overflow: auto;
/* Enable scroll if needed */
background-color: rgb(255, 255, 255);
/* Fallback color */
background-color: rgba(255, 255, 255.4);
/* Black w/ opacity */
-webkit-animation-name: fadeIn;
/* Fade in the background */
-webkit-animation-duration: .3s;
-webkit-animation-fill-mode: forwards;
animation-name: fadeIn;
animation-duration: .3s;
animation-fill-mode: forwards;
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 0px;
width: 822px;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.02), 0 6px 20px 0 rgba(0, 0, 0, 0.02);
}
}
/* Add Animation */
#-webkit-keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
#keyframes animatetop {
from {
top: -300px;
opacity: 0
}
to {
top: 0;
opacity: 1
}
}
.modalClose {
-webkit-animation-name: fadeOut;
/* Fade in the background */
-webkit-animation-duration: .3s;
animation-name: fadeOut;
animation-duration: .3s;
animation-fill-mode: forwards;
-webkit-animation-fill-mode: forwards;
}
/* The Close Button */
.close {
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
color: #5B5B5B;
font-size: 30px;
font-family: source-sans-pro, sans-serif;
font-weight: 300;
position: relative;
}
.modal-body {
width: 538px;
color: #7A7A7A;
font-size: 14px;
font-family: source-sans-pro, sans-serif;
font-weight: 400;
position: relative;
}
.modal-footer {
padding: 2px 16px;
background-color: #ffffff;
color: blac;
}
/* Add Animation */
#-webkit-keyframes fadeIn {
from {
opacity: 0
}
to {
opacity: 1
}
}
#-webkit-keyframes fadeOut {
from {
opacity: 1
}
to {
opacity: 0
}
}
<h2>Animated Modal with Header and Footer</h2>
<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>
<!-- The Overlay -->
<div id="modalOverlay"></div>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<div class="clearfix grpelem" id="u1562-4">
<!-- content -->
<p>test</p>
</div>
</div>
<div class="clearfix colelem" id="u1567-4">
<!-- content -->
<p>test</p>
</div>
<div class="colelem" id="u1568">
<!-- simple frame -->
</div>
<div class="clearfix colelem" id="u1566-4">
<!-- content -->
<p>test</p>
</div>
<div class="clip_frame colelem" id="u1556">
<!-- image -->
<img class="block" id="u1556_img" src="" alt="" width="823" height="1024" />
</div>
<div class="modal-footer">
<h3>-</h3>
</div>
</div>
</div>

you can use jQuery to do that
$('#myBtn').click(function(){
$('#myModal').fadeIn(5000);
});
$('.close').click(function(){
$('#myModal').fadeOut(5000);
});

I like using javascript, so I use the setInterval Function.
Once you want it to close, you use:
setInterval(myModal.opacity = myModal.opacity - 0.1, 500);
So it changes the opacity by -0.1 every 0.5 seconds. Of course you can change the 500 to suit your fading speed, or the 0.1 to changes how much the opacity goes down by.