We Keep Coding

Open Image in pop up from an array of Images

I am loading images from a database and following instructions given in this question and referenced here. But this only pops up the first image in the array. The rest of the images do not pop up.
I have this Array that gives me the image on index 5
ArrayList all = Customer.getCustomerImagesArray(custId);
int size = all.size();
<%
for (int i = 0; i < size; i++) {
ArrayList one = (ArrayList) all.get(i);
String imgcode = "data:image/jpeg;base64," + (String) one.get(5);
session.setAttribute("docimage", imgcode);
%>
<form name="form1" id="form1" action="do?MOD=BOK&ACT=doverDoc" method="post">
<tr style="height:20px; padding:2px;">
<td><div align="center"><img id="myImg" src="${docimage}" width="80" height="80" alt="<%=(String) one.get(2)%>"></div></td>
</tr>
</form>
<% }%>
EDIT
Here is the Css:
<style>
/* 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 {
animation-name: zoom;
animation-duration: 0.6s;
}
#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%;
}
}
</style>
and the javascript:
<script>
// 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>
Div:
<div id="myModal" class="modal">
<span class="close">×</span>
<img class="modal-content" id="img01">
<div id="caption"></div>
</div>
How do I apply this popup effect on the other images? With this only the first image pops up.

How can I use multiple modals on my site?

Trying to figure out how to use multiple modals on my website.
I have one working fine but try to use a second triggering the same javascript action but it doesn't pop up the modal. I need a system for making multiple modals as my idea is to make each one have a popup box displaying dicord usernames.
I pasted my code below:
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn1");
// 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";
}
}
.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: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* 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;
}
<li id="myBtn1"><a><i class="fa fa-"><center><img height="20px"
src="/images/icons/discord.png"></center></i></a></li>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text</p>
</div>
</div>

Detail(s)
You can easily achieve this via using querySelectorAll, this will return a HTMLCollection of DOM elements. You can then use the forEach function as stated below, personally I just find this approach slightly more readable than using a traditional for loop.
PS
A HTMLCollection is not the same as an Array, if you want to ever convert your HTMLCollection to an Array, you can do so via Array.from(HTMLCollection). There are other ways to convert Array-like objects to an Array, i.e. [].slice.call(HTMLCollection), you may wish to use the later approach if you wish to support legacy browsers or just browsers that do not support Array.from.
// Self invoked function.
(function() {
// List all of the buttons.
var btns = document.querySelectorAll("ul li a");
// List all of the modals.
var modals = document.querySelectorAll(".modal");
// The on click handler.
var onClickAction = function(index) {
// Get the modal by index.
var modal = modals[index];
if (modal != null) {
modal.style.display = "block";
// Now get the span.
var closeBtn = modal.querySelector(".close");
closeBtn.onclick = function() {
modal.style.display = "none";
};
// Re-assign the window event.
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
};
};
// Loop over each button.
btns.forEach(function(btn, index) {
btn.onclick = function() {
onClickAction(index);
};
});
})();
.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: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #7289da;
margin: 15% auto;
/* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 10%;
/* 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;
}
<ul>
<li id="myBtn1">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
<li id="myBtn2">
<a>
<i class="fa fa-">
<center><img height="20px" src="/images/icons/discord.png"></center>
</i>
</a>
</li>
</ul>
<div id="myModal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 1</p>
</div>
</div>
<div id="myModal2" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h3 style="color:white;font-weight:bold;">Discord</h3>
<p style="color:white;font-weight:bold;font-style: italic;">text - 2</p>
</div>
</div>

I cant get two HTML modals to show with CSS, JavaScript, and PHP

I am having trouble trying to get two different modals to show with two different buttons. On my actual website the buttons just show the incorrect modal but when I put it into an standalone HTML document we see the result is much different. One of the modals is showing on the screen before anyone hits a button and the second one shows with both button presses
Here is my standalone HTML Code
Any help is much appreciated, even a comment could help. I have about 3 hours into this problem ftr.
<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* 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;
}
</style>
</head>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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>
</html>
</script>
</html>

So far what I see is that you had the class 'modal' written as 'modalL' on one of your modals. You've also got some other names done incorrectly - please check my revised example.
// Get the modal
var modalL = document.getElementById('myModalL');
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementById("myBtn");
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementById("close");
var spanL = document.getElementById("closeL");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
// When the user clicks the button, open the modal
btnL.onclick = function() {
modalL.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks on <span> (x), close the modal
spanL.onclick = function() {
modalL.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 {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* 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>
<body>
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modal">
<div class="modal-content">
<span id="closeL" class="close">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span id="close" class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
</html>
</script>
</html>

<html>
<head>
<style>
body {font-family: "Lato", sans-serif}
h1 {font-family: "Raleway", sans-serif,}
.mySlides {display: none}
p {
text-align: center;
font-size: 60px;
margin-top:0px;
}
.background {
position: relative;
text-align: center;
color: white;
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}
/* 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;
}
</style>
</head>
<body onload="myFunction()">
<button class="bar-item button padding-large hover-red hide-small right" id="myBtnL">Login</button>
<button id="myBtn" class="bar-item button padding-large hover-red hide-small right">Register</button>
<div id="myModalL" class="modalL">
<div class="modal-content">
<span class="closeL">×</span>
<p>some text in the L modal</p>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>Some text in the Modal..</p>
</div>
</div>
</body>
<script>
// Get the modal
var modalL = document.getElementById('myModalL');
// Get the button that opens the modal
var btnL = document.getElementById("myBtnL");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("closeL")[0];
// When the user clicks the button, open the modal
btnL.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";
}
}
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";
}
}
function myFunction() {
document.getElementById("myModalL").style.display = 'none';
}
</script>
</html>
</script>
</html>

how to attach keydown keycode to a div box when open then unattach when closed in javascript

I want to have multiple div dialogs that hold different image gallery and when one opens that specific div dialog box the left and right keys bind and changes the images. the problem is that when you open one div and change the images to the next. another unopened the div box also changes.So how would i bind when open and close to specif div/dialog page
This the code that i have for the left and right
how to had if id/dialog click or open keycode active else not active
enter code here
onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == '37') {
//left <- show Prev image
changeImage(-1);
}
else if (e.keyCode == '39') {
// right -> show next image
changeImage(+1);
}
if (e.keyCode == '37') {
//left <- show Prev image
changeImage2(-1);
}
else if (e.keyCode == '39') {
// right -> show next image
changeImage2(+1);
}
}
// Get the modal
var modalBleach = document.getElementById('myModalMangaBleach');
// Get the button that opens the modal
var btnBleach = document.getElementById("myBtnBleach");
// Get the <span> element that closes the modal
var spanBleach = document.getElementsByClassName("closeBleach")[0];
// When the user clicks the button, open the modal
btnBleach.onclick = function() {
modalBleach.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
spanBleach.onclick = function() {
modalBleach.style.display = "none";
}
// Get the modal
var modalBleachVol1 = document.getElementById('myModalMangaBleachVol1');
// Get the button that opens the modal
var btnBleachVol1 = document.getElementById("myBtnBleachVol1");
// Get the <span> element that closes the modal
var spanBleachVol1 = document.getElementsByClassName("closeBleachVol1")[0];
// When the user clicks the button, open the modal
btnBleachVol1.onclick = function() {
modalBleachVol1.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
spanBleachVol1.onclick = function() {
modalBleachVol1.style.display = "none";
}
// Get the modal
var modalBleachVol2 = document.getElementById('myModalMangaBleachVol2');
// Get the button that opens the modal
var btnBleachVol2 = document.getElementById("myBtnBleachVol2");
// Get the <span> element that closes the modal
var spanBleachVol2 = document.getElementsByClassName("closeBleachVol2")[0];
// When the user clicks the button, open the modal
btnBleachVol2.onclick = function() {
modalBleachVol2.style.display = "block";
}
// When the user clicks on <span> (x), close the modal
spanBleachVol2.onclick = function() {
modalBleachVol2.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modalBleach) {
modalBleach.style.display = "none";
}
if (event.target == modalBleachVol1) {
modalBleachVol1.style.display = "none";
}
if (event.target == modalBleachVol2) {
modalBleachVol2.style.display = "none";
}
}
var bleachvol1 =[
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume1/Bleach_01_01_01.jpg",
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume1/Bleach_01_01_02.jpg",
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume1/Bleach_01_01_03.jpg",
];
var imageNumber=0;
var imageLength = bleachvol1.length - 1;
function changeImage(x){
imageNumber +=x;
//if youve reached end of array...sart all over to 0
if (imageNumber > imageLength){
imageNumber = 0;
}
if (imageNumber < 0){
imageNumber = imageLength;
}
document.getElementById('bleachImg1').src = bleachvol1[imageNumber];
return false;
}
var bleachvol2 =[
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume2/Bleach_02_01_00.jpg",
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume2/Bleach_02_01_01.jpg",
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume2/Bleach_02_01_02.jpg",
"https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume2/Bleach_02_01_03.jpg",
];
var imageNumber2=0;
var imageLength2 = bleachvol2.length - 1;
function changeImage2(x){
imageNumber2 +=x;
//if youve reached end of array...sart all over to 0
if (imageNumber2 > imageLength2){
imageNumber2 = 0;
}
if (imageNumber2 < 0){
imageNumber2 = imageLength2;
}
document.getElementById('bleachImg2').src = bleachvol2[imageNumber2];
return false;
}
onkeydown = function(e) {
e = e || window.event;
if (e.keyCode == '37') {
//left <- show Prev image
changeImage(-1);
}
else if (e.keyCode == '39') {
// right -> show next image
changeImage(+1);
}
if (e.keyCode == '37') {
//left <- show Prev image
changeImage2(-1);
}
else if (e.keyCode == '39') {
// right -> show next image
changeImage2(+1);
}
}
function scrollToTop(callback) {
if ($('.modal-contentBleachChapter').scrollTop(0)) {
$('.modal-contentBleachChapter').animate({ scrollTop: 0 }, callback);
$('.bleachImg').fadeOut(1);
$('.bleachImg').fadeIn(1);
return;false
}
callback();
}
/* The Modal (background) */
.modalBleach {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 60px; /* Location of the box */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.8); /* Black w/ opacity */
}
/* Modal Content */
.modal-contentBleach {
top: 0;
background-color: transparent;
margin: auto;
padding: 0px;
border: 1px solid #888;
width: 85%;
max-height:90%;
overflow-y:auto;
overflow-x:hide;
position:relative;
}
.modal-contentBleach li{
margin-left:4px;
margin-right:4px;
width:210px;
height:315px;
background-color: #888888 ;
box-shadow: 0px 0px 5px 2px black;
display:inline-block;
}
.modal-contentBleach ul{
padding:0px;
white-space: nowrap;
overflow-y:hide;
overflow-x:auto;
}
.modalBleachChapter {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
padding-top: 0px; /* 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.6); /* Black w/ opacity */
}
.modal-contentBleachChapter{
top: 0px;
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
margin: auto;
padding: 0px;
border: 1px solid #888;
width: 85%;
max-height:100%;
white-space: nowrap;
overflow:auto;
position:relative;
left:0;
right:0;
}
#media only screen and (max-width:700px) {
.modal-contentBleach li{
width:180px;
height:270px;
}
}
/* The Close Button */
.closeBleach, .closeBleachVol1,.closeBleachVol2 {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
display:inline-table;
position:fixed;
top:20px;
left:40px;
}
.closeBleach:hover,
.closeBleach:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.closeBleachVol1:hover,
.closeBleachVol1 :focus
.closeBleachVol2:hover,
.closeBleachVol2 :focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.BleachCover{
background-image: url('https://www1.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/bleach_skull.png');
background-size:cover;
background-position:center center;
background-repeat:no-repeat;
width:100%;
height:100%;
display:block;
}
.BleachVol1{
background-image:url("https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/BleachVolCover/BleachVol1.jpg");
background-size:100% 100%;
background-position:center center;
background-repeat:no-repeat;
width:100%;
height:100%;
border-radius:10px;
position:relative;
}
.BleachVol2{
background-image:url('https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/BleachVolCover/BleachVol2.jpg');
background-size:100% 100%;
background-position:center center;
background-repeat:no-repeat;
height:100%;
width:100%;
border-radius:10px;
position:relative;
}
.gradBlue {
width:100%;
height:100%;
display:block;
background: blue; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#000014,#000027,#00003b,#00004e,#000062,#000076,#000089,#00009d,#0000b1,#0000c4,#0000d8,#0000eb, #0000ff,#1414ff,#2727ff,#3b3bff,#4e4eff,#6262ff,#7676ff,#8989ff,#9d9dff,#b1b1ff,#c4c4ff,#d8d8ff); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#000014,#000027,#00003b,#00004e,#000062,#000076,#000089,#00009d,#0000b1,#0000c4,#0000d8,#0000eb, #0000ff,#1414ff,#2727ff,#3b3bff,#4e4eff,#6262ff,#7676ff,#8989ff,#9d9dff,#b1b1ff,#c4c4ff,#d8d8ff); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#000014,#000027,#00003b,#00004e,#000062,#000076,#000089,#00009d,#0000b1,#0000c4,#0000d8,#0000eb, #0000ff,#1414ff,#2727ff,#3b3bff,#4e4eff,#6262ff,#7676ff,#8989ff,#9d9dff,#b1b1ff,#c4c4ff,#d8d8ff); /* For Firefox 3.6 to 15 */
background: linear-gradient(#000014,#000027,#00003b,#00004e,#000062,#000076,#000089,#00009d,#0000b1,#0000c4,#0000d8,#0000eb, #0000ff,#1414ff,#2727ff,#3b3bff,#4e4eff,#6262ff,#7676ff,#8989ff,#9d9dff,#b1b1ff,#c4c4ff,#d8d8ff); /* Standard syntax */
}
.gradBlue:hover{
background: red; /* For browsers that do not support gradients */
background: -webkit-linear-gradient(#d8d8ff,#c4c4ff,#b1b1ff,#9d9dff,#8989ff,#7676ff,#6262ff,#4e4eff,#3b3bff,#2727ff,#1414ff, #0000ff,#0000eb,#0000d8,#0000c4,#0000b1,#00009d,#000089,#000076,#000062,#00004e,#00003b,#000027,#000014); /* For Safari 5.1 to 6.0 */
background: -o-linear-gradient(#d8d8ff,#c4c4ff,#b1b1ff,#9d9dff,#8989ff,#7676ff,#6262ff,#4e4eff,#3b3bff,#2727ff,#1414ff, #0000ff,#0000eb,#0000d8,#0000c4,#0000b1,#00009d,#000089,#000076,#000062,#00004e,#00003b,#000027,#000014); /* For Opera 11.1 to 12.0 */
background: -moz-linear-gradient(#d8d8ff,#c4c4ff,#b1b1ff,#9d9dff,#8989ff,#7676ff,#6262ff,#4e4eff,#3b3bff,#2727ff,#1414ff, #0000ff,#0000eb,#0000d8,#0000c4,#0000b1,#00009d,#000089,#000076,#000062,#00004e,#00003b,#000027,#000014); /* For Firefox 3.6 to 15 */
background: linear-gradient(#d8d8ff,#c4c4ff,#b1b1ff,#9d9dff,#8989ff,#7676ff,#6262ff,#4e4eff,#3b3bff,#2727ff,#1414ff, #0000ff,#0000eb,#0000d8,#0000c4,#0000b1,#00009d,#000089,#000076,#000062,#00004e,#00003b,#000027,#000014); /* Standard syntax */
}
<div class="MainPanel1" style="width:90%;">
<ul>
<li>
<div id="myBtnBleach" class="gradBlue">
<div class="BleachCover"></div>
</div>
</li>
</ul>
</div>
<div id="myModalMangaBleach" class="modalBleach">
<!-- Modal content--->
<span class="closeBleach">×</span>
<div class="modal-contentBleach">
<center>
<ul>
<li id="myBtnBleachVol1" class="BleachVol1"></li>
<li id="myBtnBleachVol2" class="BleachVol2"></li>
</ul>
</center>
</div>
</div>
<div id="myModalMangaBleachVol1" class="modalBleachChapter" >
<!-- Modal content--->
<span class="closeBleachVol1"><i class="fa fa-close" style="font-size:36px"></i></span>
<div class="modal-contentBleachChapter" id="modal-contentBleachChapter">
<center>
<div id="BleachVol2" onkeydown='' onclick='scrollToTop();' style="position:relative;border:green solid 2px;margin:auto;">
<img
onclick='changeImage(+1);return false;'
class='bleachImg'
id='bleachImg1'
src="https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume1/Bleach_01_01_01.jpg"
/>
</div>
<a href="#" style="position:fixed;display:block;bottom:0px;left:8%;border:2px lime solid;width:100px;background-color:green;"
type='button' value='prev' onclick='scrollToTop();changeImage(-1); return false;'><i class="fa fa-arrow-circle-left" style="font-size:36px"></i></a>
<a href="#" style="position:fixed;display:block;bottom:0px;right:10%;border:2px lime solid;width:100px;background-color:green;"
type='button' value='next' onclick='scrollToTop();changeImage(+1); return false;'
><i class="fa fa-arrow-circle-right" style="font-size:36px"></i></a>
</div>
</center>
</div>
<div id="myModalMangaBleachVol2" class="modalBleachChapter">
<!-- Modal content--->
<span class="closeBleachVol2"><i class="fa fa-close" style="font-size:36px"></i></span>
<div class="modal-contentBleachChapter" id="modal-contentBleachChapter">
<center>
<div onclick='scrollToTop();' style="display:block;position:relative;border:green solid 2px;margin:auto;">
<img
onclick='changeImage2(+1);return false;'
class='bleachImg'
id='bleachImg2'
src="https://www.weebly.com/editor/uploads/9/3/5/2/93529890/custom_themes/678622397973825322/files/Manga/Bleach/Volumes/Volume2/Bleach_02_01_00.jpg"
/>
</div>
<a href="#" style="position:fixed;display:block;bottom:0px;left:8%;border:2px lime solid;width:100px;background-color:green;"
type='button' value='prev' onclick='scrollToTop();changeImage2(-1); return false;'><i class="fa fa-arrow-circle-left" style="font-size:36px"></i></a>
<a href="#" style="position:fixed;display:block;bottom:0px;right:10%;border:2px lime solid;width:100px;background-color:green;"
type='button' value='next' onclick='scrollToTop();changeImage2(+1); return false;'
><i class="fa fa-arrow-circle-right" style="font-size:36px"></i></a>
</div>
</center>
</div>

Create an onclick event handler for all elements of the class of your clickable divs. In the onclick handler, define the keydown handlers for this exact div.
Now, when you click the "X" (or however you can close the gallery), set an onclick event handler for that to remove the keydown event handlers for the current opened div and then close the div.

How to load a iframe only on button click

I want a youtube video Iframe only when "Watch Video" Button is clicked. Currently the video iframe loads in the background, when the page loads.
Note: I do not mean, play the video on button click. I mean, load the iframe on button click
https://jsfiddle.net/kz0xxe22/
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
var trailerbox = document.getElementById("close");
trailerbox.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";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

You can change the src attribute to a data-src, then when you click the button, set src to data-src
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
var trailer = document.getElementById('trailervideo');
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
trailer.setAttribute('src', trailer.getAttribute('data-src'));
}
var trailerbox = document.getElementById("close");
trailerbox.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";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="trailervideo" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

Simplest thing to do is add the src attribute when clicking the "Watch Trailer" button! :)
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
//Add "src" attribute by getting the video and setting it with setAttribute.
document.getElementsByClassName('trailervideo')[0].setAttribute('src', 'https://www.youtube.com/embed/TDwJDRbSYbw');
}
var trailerbox = document.getElementById("close");
trailerbox.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";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color:#f2f2f2;
color:red;
font-weight:600;
border: none; /* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color:#e2e2e2;
cursor:pointer;
}
#trailerdivbox {
display:none;
width: 100%;
height:100%;
position:fixed;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width:560px;
max-height:315px;
width: 95%;
height: 95%;
left:0;
right:0;
margin:auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox" >
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>