Overlay for several moduls possible?

Overlay for several moduls possible? - javascript

Why can I not use the class myBtn for several overlays ? It is a class it must work or not? I want to use the overlay function for several buttons is it in some way possible ? I know the ids can not been used for several times thats why I changes it to classes but it still does not work.
I have the example from w3schools below.
<!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 */
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 */
-webkit-animation-name: fadeIn; /* Fade in the background */
-webkit-animation-duration: 0.4s;
animation-name: fadeIn;
animation-duration: 0.4s
}
/* Modal Content */
.modal-content {
position: fixed;
bottom: 0;
background-color: #fefefe;
width: 100%;
-webkit-animation-name: slideIn;
-webkit-animation-duration: 0.4s;
animation-name: slideIn;
animation-duration: 0.4s
}
/* 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;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Add Animation */
#-webkit-keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#keyframes slideIn {
from {bottom: -300px; opacity: 0}
to {bottom: 0; opacity: 1}
}
#-webkit-keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
#keyframes fadeIn {
from {opacity: 0}
to {opacity: 1}
}
</style>
</head>
<body>
<h2>Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button class="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>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<h2>2 Bottom Modal</h2>
<!-- Trigger/Open The Modal -->
<button class="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>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
</div>
</div>
</div>
<script>
// Get the modal
var modal = document.getElementById('myModal');
// Get the button that opens the modal
var btn = document.getElementsByClassName("myBtn")[0];
// 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>

U are using 2 times the following id.
id="myModal"
Change it to class and also the javascript part so it looks like this:
var modal = document.getElementByClassName('myModal');
As u said, u can only use once an id.

Related

How to assign diffrent popup with same function with javascript?

so I have this program I am trying to type and I found different ways to write the code but the same popup screen comes how do I call the same function but show different headers when clicked? I have tried to use the same function with different classes called but IDK why everything disappears but I haven't coded javascript very much and still new to me. Please help me the way I am trying to am at is when Wedding button is clicked I want to show "you clicked wedding button" when the birthday is clicked "birthday button"..etc, problem is that the wedding functions is only showing how do I fix it?
/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");
function toggleModal() {
modal.classList.toggle("show-modal");
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", toggleModal);
window.addEventListener("click", windowOnClick);
/* Popup screen for each modal when pressed
buttons when pressed background changes
setup for when clicked*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/*center of page with padding and borders*/
.modal-content {
position: absolute;
top: 359px;
left: 624px;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 34%;
border-radius: 0.5rem;
height: 122%;
}
/*close button layout with hover background*/
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/*style of modal when its open */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div id="occasion">
<button id="occassion_layout" class="wedding_POPUP">Wedding</button>
<button id="occassion_layout" class="Birthday_POPUP">Birthday</button>
<button id="occassion_layout" class="Party_POPUP">Holiday</button>
</div>
<div id="Wed_fill">
<span class="close">×</span>
<!--when the wedding button is pusehed what it will show show div boderline-->
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p>Wedding button clicked</p>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
</div>
<div class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
</div>

Add an attribute to the button that relates it to the corresponding modal, so you can toggle that modal.
/*wedding popup to fill */
const modal = document.querySelector(".modal");
const wedding_POPUP = document.querySelector(".wedding_POPUP");
const closeButton = document.querySelector(".close-button");
function closeModal() {
document.querySelectorAll(".modal").forEach(el => el.classList.remove("show-modal"));
}
function toggleModal(e) {
let modal = document.getElementById(e.target.dataset.rel);
if (modal) {
document.querySelectorAll(".modal").forEach(el => {
if (el == modal) {
el.classList.toggle("show-modal");
} else {
el.classList.remove("show-modal");
}
});
}
}
function windowOnClick(event) {
if (event.target === modal) {
toggleModal(event);
}
}
wedding_POPUP.addEventListener("click", toggleModal);
closeButton.addEventListener("click", closeModal);
window.addEventListener("click", windowOnClick);
/* Popup screen for each modal when pressed
buttons when pressed background changes
setup for when clicked*/
.modal {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transform: scale(1.1);
transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
}
/*center of page with padding and borders*/
.modal-content {
position: absolute;
top: 359px;
left: 624px;
transform: translate(-50%, -50%);
background-color: white;
padding: 1rem 1.5rem;
width: 34%;
border-radius: 0.5rem;
height: 122%;
}
/*close button layout with hover background*/
.close-button {
float: right;
width: 1.5rem;
line-height: 1.5rem;
text-align: center;
cursor: pointer;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/*style of modal when its open */
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
<div id="occasion">
<button id="occassion_layout" class="wedding_POPUP" data-rel="wedding_modal">Wedding</button>
<button id="occassion_layout" class="Birthday_POPUP" data-rel="birthday_modal">Birthday</button>
<button id="occassion_layout" class="Party_POPUP" data-rel="holiday_modal">Holiday</button>
</div>
<div id="Wed_fill">
<span class="close">×</span>
<!--when the wedding button is pusehed what it will show show div boderline-->
<div id="wedding_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<p>Wedding button clicked</p>
</div>
</div>
</div>
<div id="birthday_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
</div>
<div id="party_modal" class="modal">
<div class="modal-content">
<span class="close-button">×</span>
<!--form for birthday-->
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
</div>
This code isn't fully working, but I have to leave now.

I took liberty to format a bit using flex.
I suggest a "toggle" for display using data attribute so you only have to "change" it not add/remove it - and you can use that in the CSS (I used "show" and "hide" values.
To open a modal, I used a "target" data as a class and selected by that - it could be a number of values/combinations.
I set up a "close" event for the X and then triggered them all to close when a button was clicked so if one is already open we only have one at a time open.
I did away with all the "position" css and used flex instead of px this way and that etc. which is hard to maintain from my experience.
Something you can build upon I think.
const modals = document.querySelectorAll(".modal");
const actionButtons = document.querySelectorAll(".modal-activator");
const closeButtons = document.querySelectorAll(".close-button");
/* not used but could trigger the closeEvent etc. */
function windowOnClick(event) {
if (event.target === modal) {
toggleModal();
}
}
// create close event
const closeEvent = new Event('close-modal');
// Listen for the event.
closeButtons.forEach(btn => btn.addEventListener('close-modal', function(event) {
let myModal = event.target.closest(".modal");
myModal.dataset.showToggle = "hide";
}, false));
actionButtons.forEach(btn => btn.addEventListener('click', event => {
// console.log(event.target.getAttribute("data-target-modal"));
const dataAttrMap = event.target.dataset;
const modalSelector = ".modal." + dataAttrMap.targetModal;
// console.log(modalSelector);
closeAllModals(closeButtons);
const modalTarget = document.querySelector(modalSelector);
modalTarget.dataset.showToggle = "show";
}));
closeButtons.forEach(btn => btn.addEventListener('click', function(event) {
let myModal = event.target.closest(".modal");
myModal.dataset.showToggle = "hide";
}, false));
function closeAllModals(buttons) {
buttons.forEach(btn => btn.dispatchEvent(closeEvent));
}
.contaner {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: start;
}
.occasion.contaner {
flex-direction: row;
column-gap: 0.5em;
align-self: flex-start;
margin-bottom: 1rem;
}
.modal {
display: flex;
align-items: flex-start;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
}
.modal-content {
border-radius: 0.5rem;
background-color: white;
padding: 1rem 1.5rem;
margin-top: 1rem;
margin-left: 0.5rem;
margin-bottom: 1rem;
}
.close-button {
align-self: flex-start;
margin-left: auto;
width: 1.5rem;
line-height: 1.5rem;
cursor: pointer;
text-align: center;
border-radius: 0.25rem;
background-color: lightgray;
}
.close-button:hover {
background-color: darkgray;
}
/* not used
.show-modal {
opacity: 1;
visibility: visible;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
*/
.modal[data-show-toggle="show"] {
opacity: 1;
display: flex;
transform: scale(1.0);
transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}
.modal[data-show-toggle="hide"] {
display: none;
}
[data-target-modal]{padding: 0.5rem;border-radius: 0.5rem;}
[data-target-modal="wedding"]{background-color:pink;border-color:#ff8888;}
[data-target-modal="holiday"]{background-color:#AAAAFF;}
<div class="page container">
<div id="occasion" class="occasion contaner">
<button class="wedding_POPUP modal-activator" data-target-modal="wedding" type="button">Wedding</button>
<button class="Birthday_POPUP modal-activator" data-target-modal="birthday" type="button">Birthday</button>
<button class="Party_POPUP modal-activator" data-target-modal="holiday" type="button">Holiday</button>
</div>
<div class="container">
<div class="modal wedding" data-show-toggle="hide">
<div class="modal-content">
<p>Wedding button clicked</p>
</div>
<span class="close-button">×</span>
</div>
<div class="modal birthday" data-show-toggle="hide">
<div class="modal-content">
<div class="Birth_fill">
<div class="Birthday_form">
<p>HAPPY BIRTHDAY button clicked</p>
</div>
</div>
</div>
<span class="close-button">×</span>
</div>
<div class="modal holiday" data-show-toggle="hide">
<div class="modal-content">
<div class="party_filled">
<div class="party_form">
<p>Party button clicked</p>
</div>
</div>
</div>
<span class="close-button">×</span>
</div>
</div>
</div>

Modals With 4 or More Close (X) Span On Click AREN'T Closing / FIXED Template With FIXED Modals

When I add 4 + Span On Close JS lines to my modals software, the close button Stops closing All of the modals. How can I Fix that?
Also, when I Add Fixed Header / Fixed Footer modals to my Fixed Header template, the modals the modals go inside the site template, with the modals headers Not showing, and the template showing in the background when scrolling. How can I get the modals to Cover the whole fixed header template?
// Open A Modal
var modal = document.getElementsByClassName('modal');
// Get A Button That Opens A Modal
var btn = document.getElementsByClassName("modal-open-buttons");
// Get A <span> Element That Closes A Modal
var span = document.getElementsByClassName("close");
// When User Clicks On A Modal Open Button, Open A Modal. Must Start With 0, And Count Up
btn[0].onclick = function() {
modal[0].style.display = "block";
};
btn[1].onclick = function() {
modal[1].style.display = "block";
};
btn[2].onclick = function() {
modal[2].style.display = "block";
};
btn[3].onclick = function() {
modal[3].style.display = "block";
};
btn[4].onclick = function() {
modal[4].style.display = "block";
};
btn[5].onclick = function() {
modal[5].style.display = "block";
};
btn[6].onclick = function() {
modal[6].style.display = "block";
};
btn[7].onclick = function() {
modal[7].style.display = "block";
};
btn[8].onclick = function() {
modal[8].style.display = "block";
};
btn[9].onclick = function() {
modal[9].style.display = "block";
};
// When Users Click On A Modal Close Button <span> (x), Close A Modal. Must Start With 0, And Count Up
span[0].onclick = function() {
modal[0].style.display = "none";
};
span[1].onclick = function() {
modal[1].style.display = "none";
};
span[2].onclick = function() {
modal[2].style.display = "none";
};
span[3].onclick = function() {
modal[3].style.display = "none";
};
span[4].onclick = function() {
modal[4].style.display = "none";
};
span[5].onclick = function() {
modal[5].style.display = "none";
};
span[6].onclick = function() {
modal[6].style.display = "none";
};
span[7].onclick = function() {
modal[7].style.display = "none";
};
span[8].onclick = function() {
modal[8].style.display = "none";
};
span[9].onclick = function() {
modal[9].style.display = "none";
};
// When Users Click Anywhere Outside of a Modal, Close That Modal
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 */
left: 0;
top: 0;
width: 100%; /* Full Width */
height: 100%; /* Full Height */
overflow: scroll; /* Enable Scroll If Feeded */
}
/* Modal Content */
.modal-content {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
position: relative;
background: #FFF;
margin: 0 auto;
padding-top: 90px;
padding-bottom: 100px;
width: 100%;
height: 100%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
-moz-animation-name: animatetop;
-moz-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}
}
.modal-open-buttons {
background: #FFF;
color: #4169E1;
border-color: #663399;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
display: block;
margin: 0 auto;
}
/* The Close Button */
.modal-header .close {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #663399;
}
.modal-header .close:hover,
.modal-header .close:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
}
.modal-header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #C0C0C0;
color: #4169E1;
position: fixed;
top: 0;
z-index: 9999;
width: 100%;
}
.modal-header .left-column {
float: left;
font-size: 22px;
text-align: center;
background: #C0C0C0;
width: 50%;
padding-left: 10px;
}
.modal-header .right-column {
float: right;
font-size: 24px;
background: #C0C0C0;
padding-top: 10px;
padding-right: 20px;
}
.modal-body {
/* DON'T USE WIDTH FOR THE MODAL BODY!*/
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #663399;
padding-right: 5px;
padding-left: 5px;
}
.modal-footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #663399;
color: #FFF;
position: fixed;
bottom: 0;
z-index: 9999;
width: 100%;
}
/* iFrame On SMALL Screens */
#media only screen and (max-width: 700px) {
.modal-video-iframe {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.modal-video-iframe iframe {
position: absolute;
padding-top: 65px;
border: 0;
top: 0;
width: 65% !important;
height: 100% !important;
}
}
/* iFrame On BIG Screens */
.modal-video-iframe {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.modal-video-iframe iframe {
position: absolute;
border: 0;
top: 0;
width: 50%;
height: 50%;
}
.IE-NO-iFrame-Videos {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #4169E1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The Above 3 Meta Tags MUST Come First In The Head; Any Other Head Content MUST Come AFTER These Tags -->
<Title>MODALS</Title>
</head>
<body>
<br><br>
<!-- Trigger / Open A Modal -->
<button class="modal-open-buttons">Open A<br>Text Modal</button>
<!-- The Modal -->
<div id="modal-01" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<div class="columns left-column">
<p>THIS IS A TEXT MODAL HEADER</p>
</div>
<div class="columns right-column">
<span class="close">(X)</span>
</div>
</div>
<div class="modal-body">
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
</div>
<div class="modal-footer">
<h3>MODAL FOOTER</h3>
</div>
</div>
</div>
<br><br>
<!-- Trigger / Open A Modal -->
<button class="modal-open-buttons">Open A<br>Video Modal</button>
<p class="IE-NO-iFrame-Videos">iFRAME VIDEOS AREN'T SUPPORTED ON IE!</p>
<!-- The Modal -->
<div id="modal-02" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<div class="columns left-column">
<p>THIS IS A VIDEO MODAL HEADER</p>
</div>
<div class="columns right-column">
<span class="close">(X)</span>
</div>
</div>
<div class="modal-body">
<div class="modal-video-iframe">
<!--<iframe src="https://NewTube.app/embed/ATrboWO" allowfullscreen></iframe>-->
<iframe src="https://tv.gab.com/channel/richardgage33/embed/what-can-a-cdi-explosives-loader-61ebff750f7a80b265bbd5f6" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<h3>MODAL FOOTER</h3>
</div>
</div>
</div>
<br><br>
<!-- Trigger / Open A Modal -->
<button class="modal-open-buttons">Open A<br>Video Modal</button>
<p class="IE-NO-iFrame-Videos">iFRAME VIDEOS AREN'T SUPPORTED ON IE!</p>
<!-- The Modal -->
<div id="modal-03" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<div class="columns left-column">
<p>THIS IS A VIDEO MODAL HEADER</p>
</div>
<div class="columns right-column">
<span class="close">(X)</span>
</div>
</div>
<div class="modal-body">
<div class="modal-video-iframe">
<!--<iframe src="https://NewTube.app/embed/ATrboWO" allowfullscreen></iframe>-->
<iframe src="https://tv.gab.com/channel/richardgage33/embed/what-can-a-cdi-explosives-loader-61ebff750f7a80b265bbd5f6" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<h3>MODAL FOOTER</h3>
</div>
</div>
</div>
</body>
</html>

The most obvious problem that your code doesn't work is your only has 9 modal, you only have three.
Also, your code is currently displaying typeerror. The problem is modal has 9 elements and in your window.onclick, you directly use modal which is incorrect.
You have to specify each element.
In my code below, you could use forEach loop to loop over it.
Also, I specify all your other JS code using forEach which is much clearer and easier.
// Open A Modal
var modal = [...document.getElementsByClassName('modal')];
// Get A Button That Opens A Modal
var btn = [...document.getElementsByClassName("modal-open-buttons")];
// Get A <span> Element That Closes A Modal
var span = [...document.getElementsByClassName("close")];
// When User Clicks On A Modal Open Button, Open A Modal. Must Start With 0, And Count Up
btn.forEach((button,i)=>{
button.addEventListener('click',()=>modal[i].style.display= 'block')
})
span.forEach((s,i) =>{
s.addEventListener('click',()=>modal[i].style.display = "none");
})
window.addEventListener("click", function(event) {
modal.forEach(item=>{
if (event.target == item)
item.style.display = "none";
})
});
/* The Modal (Background) */
.modal {
display: none; /* Hidden By Default */
position: fixed; /* Stay In Place */
z-index: 1; /* Sit On Top */
left: 0;
top: 0;
width: 100%; /* Full Width */
height: 100%; /* Full Height */
overflow: scroll; /* Enable Scroll If Feeded */
}
/* Modal Content */
.modal-content {
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
text-align: center;
position: relative;
background: #FFF;
margin: 0 auto;
padding-top: 90px;
padding-bottom: 100px;
width: 100%;
height: 100%;
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
-moz-animation-name: animatetop;
-moz-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}
}
.modal-open-buttons {
background: #FFF;
color: #4169E1;
border-color: #663399;
width: 200px;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: bold;
display: block;
margin: 0 auto;
}
/* The Close Button */
.modal-header .close {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
color: #663399;
}
.modal-header .close:hover,
.modal-header .close:focus {
color: #FFF;
text-decoration: none;
cursor: pointer;
}
.modal-header {
font-family: Arial, Helvetica, sans-serif;
font-weight: bold;
background: #C0C0C0;
color: #4169E1;
position: fixed;
top: 0;
z-index: 9999;
width: 100%;
}
.modal-header .left-column {
float: left;
font-size: 22px;
text-align: center;
background: #C0C0C0;
width: 50%;
padding-left: 10px;
}
.modal-header .right-column {
float: right;
font-size: 24px;
background: #C0C0C0;
padding-top: 10px;
padding-right: 20px;
}
.modal-body {
/* DON'T USE WIDTH FOR THE MODAL BODY!*/
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #663399;
padding-right: 5px;
padding-left: 5px;
}
.modal-footer {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
background: #663399;
color: #FFF;
position: fixed;
bottom: 0;
z-index: 9999;
width: 100%;
}
/* iFrame On SMALL Screens */
#media only screen and (max-width: 700px) {
.modal-video-iframe {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.modal-video-iframe iframe {
position: absolute;
padding-top: 65px;
border: 0;
top: 0;
width: 65% !important;
height: 100% !important;
}
}
/* iFrame On BIG Screens */
.modal-video-iframe {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.modal-video-iframe iframe {
position: absolute;
border: 0;
top: 0;
width: 50%;
height: 50%;
}
.IE-NO-iFrame-Videos {
font-family: Arial, Helvetica, sans-serif;
font-size: 18px;
font-weight: bold;
text-align: center;
color: #4169E1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The Above 3 Meta Tags MUST Come First In The Head; Any Other Head Content MUST Come AFTER These Tags -->
<Title>MODALS</Title>
</head>
<body>
<br><br>
<!-- Trigger / Open A Modal -->
<button class="modal-open-buttons">Open A<br>Text Modal</button>
<!-- The Modal -->
<div id="modal-01" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<div class="columns left-column">
<p>THIS IS A TEXT MODAL HEADER</p>
</div>
<div class="columns right-column">
<span class="close">(X)</span>
</div>
</div>
<div class="modal-body">
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
<p>THIS IS A DEMO OF A SCROLLING MODAL WITH A FIXED HEADER, AND A FIXED FOOTER! MODALS CAN BE USED FOR TEXT, IMAGES, VIDEOS, FORMS, ETC.!</p>
</div>
<div class="modal-footer">
<h3>MODAL FOOTER</h3>
</div>
</div>
</div>
<br><br>
<!-- Trigger / Open A Modal -->
<button class="modal-open-buttons">Open A<br>Video Modal</button>
<p class="IE-NO-iFrame-Videos">iFRAME VIDEOS AREN'T SUPPORTED ON IE!</p>
<!-- The Modal -->
<div id="modal-02" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<div class="columns left-column">
<p>THIS IS A VIDEO MODAL HEADER</p>
</div>
<div class="columns right-column">
<span class="close">(X)</span>
</div>
</div>
<div class="modal-body">
<div class="modal-video-iframe">
<!--<iframe src="https://NewTube.app/embed/ATrboWO" allowfullscreen></iframe>-->
<iframe src="https://tv.gab.com/channel/richardgage33/embed/what-can-a-cdi-explosives-loader-61ebff750f7a80b265bbd5f6" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<h3>MODAL FOOTER</h3>
</div>
</div>
</div>
<br><br>
<!-- Trigger / Open A Modal -->
<button class="modal-open-buttons">Open A<br>Video Modal</button>
<p class="IE-NO-iFrame-Videos">iFRAME VIDEOS AREN'T SUPPORTED ON IE!</p>
<!-- The Modal -->
<div id="modal-03" class="modal">
<!-- Modal Content -->
<div class="modal-content">
<div class="modal-header">
<div class="columns left-column">
<p>THIS IS A VIDEO MODAL HEADER</p>
</div>
<div class="columns right-column">
<span class="close">(X)</span>
</div>
</div>
<div class="modal-body">
<div class="modal-video-iframe">
<!--<iframe src="https://NewTube.app/embed/ATrboWO" allowfullscreen></iframe>-->
<iframe src="https://tv.gab.com/channel/richardgage33/embed/what-can-a-cdi-explosives-loader-61ebff750f7a80b265bbd5f6" allowfullscreen></iframe>
</div>
</div>
<div class="modal-footer">
<h3>MODAL FOOTER</h3>
</div>
</div>
</div>
</body>
</html>

Open Corresponding Popups for Various buttons in Javascript

My HTML file has a number of icon images (all images have the same class attribute) and the same number of HTML snippets that represent a modal/popup (they also have the same class name). The icons and the popup snippets always come in pairs and are generated dynamically which means the exact number of pairs is unknown. My HTML code looks like this -
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text 1</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text 2</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Some text 3</p>
</div>
</div>
</div>
Please note that the text for each modal is different.
I want to create a logic in JavaScript where clicking on the icon opens the corresponding model. For example - Clicking the first icon should show "Sample text 1" , clicking the second icon should show "sample text 2".
Below is my JS code which (obviously) doesn't work:
var btn = document.getElementsByClassName("tooltip_icon");
var modal = document.getElementsByClassName("tooltip_modal");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
function displayModal(k) {
modal[k].style.display = "block";
}
// When the user clicks on <span> (x), close the modal
function hideModal(k) {
modal[k].style.display = "none";
}
for (var i=0,j=0; i<btn.length,j<modal.length; i++,j++) {
btn[i].onclick = displayModal(j);
span.onclick = hideModal(j);
window.onclick = function(event) {
if (event.target == modal[j]) {
hideModal(j);
}
}
}
What I am trying to do here is loop through all icons and modals and for every icon[i] I am trying to call modal[j].
Jsfiddle code - https://jsfiddle.net/2orwct27/
Please help!
Thanks in advance

Okay,
there are several problems in your code. I rewrote the whole code so you get an idea what was wrong in your code and how your solution may look like.
Keep in mind, what I wrote uses language features which not all browsers support. In modern browsers however it will run fine.
function openWindow(modal) {
modal.style.display = 'block';
setTimeout(() => { document.addEventListener('click', closeModal); });
}
function closeWindow(modal) {
modal.style.display = 'none';
setTimeout(() => { document.removeEventListener('click', closeModal); });
}
function closeModal(e) {
const modal = getModalRoot(e.target);
if (modal) return;
[].forEach.call(document.querySelectorAll('.tooltip_modal'), closeWindow);
}
function getModalRoot(element) {
if (!element || !element.classList) return null;
if (element.classList.contains('modal-content')) return element;
return getModalRoot(element.parentNode);
}
[].forEach.call(document.querySelectorAll('.tooltip_icon'), (x, i) => {
x.id = `opener${i}`;
const modal = x.querySelector(`#${x.id} ~ .tooltip_modal`);
x.addEventListener('click', () => { openWindow(modal); });
modal.querySelector('.close').addEventListener('click', () => { closeWindow(modal); });
});
/* The Modal (background) */
.tooltip_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: #425563;
border-bottom: 4px solid #ffd100;
color: white;
}
.modal-body {padding: 10px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
/* Tooltip icon*/
.tooltip_icon
{
padding-bottom: 4px;
padding-left: 2px;
}
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text one</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Sample text 2</p>
</div>
</div>
</div>
<img src="/images/info_icon.gif" class="tooltip_icon" alt="sample">
<div class="tooltip_modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h5>Tooltip</h5>
</div>
<div class="modal-body">
<p>Some text 3</p>
</div>
</div>
</div>
First of all I didn't change any HTML or CSS.
What's different
Instead of looping thru all images and modal-elements and change there html, you could add an EventListener for the images and each close-element.
For the functions to show and hide the modal now it get's the modal itself instead it's index.
In your code you check on click if the click target equals the model. If so it should close it. But in the comment in your code you wan't it the other way around. Because I guess this is the natural behavior this is the way it's implemented in my snipped.

JavaScript not working in aspx C# webpage

My JavaScript is not working, when I put it in asps webpage inside a script tag. Code is in the images and in code as well.
It is actually a model box to open images like lightBox/fancyBox but it only open the model box for 1 second, but it works in normal html page
<%# Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>model box</title>
<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(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: 60%;
height:auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.clear {
clear:both;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content .p1 {
float:left;
border-right:1px;
width:50%;
}
.modal-content .p2 {
float:right;
width:50%;
}
#img {
position:relative;
width:400px;
height:400px;
}
#img #mm{
position:absolute;
top:0px;
right:0px;
z-index: 16;
}
#img img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Modal Example</h2>
<div id="img">
<a href="">
<img src="../images/1pic.jpg" width="400px" height="400px" />
<span id="mm"><button id="d">MM</button> </span>
</a>
</div>
<!-- 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>
<div class="p1" >
<img src="../images/1pic.jpg" height="100%" width="80%" > />
</div>
<div class="p2">
<p>Some text in the Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<p>Some text ithe Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<input id="Button1" type="button" value="button" />
</div>
<div class="clear"></div>
</div>
</div>
<script type="text/javascript">
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>
</form>
</body>
</html>

As I commented your issue when the user clicks on the Open Modal button it submits the form which means essentially reloaded the page. What you need to do is return false on your btn.onclick = function () function. For simplicity I have posted all the code:
<%# Page Language="C#" AutoEventWireup="true" CodeFile="img-model.aspx.cs" >Inherits="webpages_img_model" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>model box</title>
<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(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: 60%;
height:auto;
}
/* The Close Button */
.close {
color: #aaaaaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.clear {
clear:both;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-content .p1 {
float:left;
border-right:1px;
width:50%;
}
.modal-content .p2 {
float:right;
width:50%;
}
#img {
position:relative;
width:400px;
height:400px;
}
#img #mm{
position:absolute;
top:0px;
right:0px;
z-index: 16;
}
#img img{
width:100%;
height:auto;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<h2>Modal Example</h2>
<div id="img">
<!-- added # -->
<a href="#">
<!-- I would set the dimensions width and height in CSS -->
<img src="../images/1pic.jpg" width="400" height="400" />
<span id="mm">
<button id="d">MM</button> </span>
</a>
</div>
<!-- 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>
<div class="p1" >
<img src="../images/1pic.jpg" height="100" width="80" />
</div>
<div class="p2">
<p>Some text in the Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<p>Some text ithe Modal..</p> <br />
<p>Some text in the Modal..</p> <br />
<input id="Button1" type="button" value="button" />
</div>
<div class="clear">
</div>
</div>
</div>
<script type="text/javascript">
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";
/* added to prevent the page to submitting */
return false;
}
// 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
/* got rid of the $window and just replaced it with window */
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
</script>
</form>
</body>
</html>
I made some other changes as well to the html and javascript, see inline comments

How do I keep users input after closing modal in the same page without reload?

I want to be able to keep the data that the user decided in the checkbox of the modal and send it with the checkbox decision outisde of the modal without leaving the page or reloading.
If the user decides to check the checkbox within the modal how do I keep that data when I press continue to then wait for the submit button to send tha values of all the checkboxes.
var btn = document.getElementById("myBtn");
// 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;
}
.modal-footer {
padding: 2px 16px;
background-color: #5cb85c;
color: white;
}
<!-- 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>
<h2>Modal Header</h2>
</div>
<div class="modal-body">
<p>Some text in the Modal Body</p>
<p>Some other text...</p>
</div>
<div class="modal-footer">
<h3>Modal Footer</h3>
<input type="checkbox" name="option" />
<input type="submit" value="continue" />
</div>
</div>
</div>
<div>
<input type="checkbox" name="value" />
<input type="submit" value="Send" />
</div>

Do not think of a modal as an entity separate from your page. A modal is just a normal div on your page, but it is positioned centered and overtop of other things. But it's just a regular div and you can read the values of elements in the modal at any time, even when it's invisible.
The values in the modal's checkbox are still available, just as they would be if they were in a different div. If your form is in the modal, then they are still part of the form. If the form is outside the modal, then you want to use javascript/jQuery at any time to read that checkbox and influence your form.
Here is an example where the form is outside the modal, and javascript updates the value of a form field when the modal is closed.
$('#myModal').modal('hide');
$('button').click(function(){
$('#myModal').modal('show');
});
$('#myCB').change(function(){
$('form input[name=inFormCB]').val( $(this).prop('checked') );
});
form{width:100%;padding:30px;background:wheat;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<p>INSTRUCTIONS: Open modal. Check/Uncheck the checkbox. Close modal. Observe result.</p>
<button>Open Modal</button>
<form>
Value of checkbox myCB:<br>
<input type="text" name="inFormCB" />
</form>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
<input id="myCB" type="checkbox" /> Got It
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

you must make a css of that text Option : to Focus

Develop Reference

JavaScript is the programming language of the Web.

Overlay for several moduls possible? - javascript

U are using 2 times the following id. id="myModal" Change it to class and also the javascript part so it looks like this: var modal = document.getElementByClassName('myModal'); As u said, u can only use once an id.

Related

How to assign diffrent popup with same function with javascript?

Modals With 4 or More Close (X) Span On Click AREN'T Closing / FIXED Template With FIXED Modals

Open Corresponding Popups for Various buttons in Javascript

JavaScript not working in aspx C# webpage

How do I keep users input after closing modal in the same page without reload?

Categories

Resources