Open Corresponding Popups for Various buttons in Javascript - 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.

Related

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>

Attmepting to close a popup using javascript

I'm a JS rookie, so be patient with me. I just created a js popup using this code https://www.w3schools.com/howto/howto_js_popup.asp and now I am attempting to add a simple close button to the top right corner to direct users to. I looked at some of the other close button threads and none of them seemed like they would integrate into my js code.

i Well searched "js close button" on the site which brought up several threads but none of them seemed to have an easy addition to the js script (Im assuming thats where the code should go). Again. Newbie.

Add a css class and simply display and hide it on button click
var modal = document.getElementById('myModal');
var btn = document.getElementById("myBtn");
var span = document.getElementsByClassName("close")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
body {font-family: Arial, Helvetica, sans-serif;}
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: lightBlue;
background-color: grey;
}
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
}
.close {
color: black;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-body {padding: 2px 16px;}
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<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>

Overlay for several moduls possible?

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.

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

Categories

Resources