Attmepting to close a popup using javascript

Attmepting to close a popup using javascript - 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>

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>

Don't know how to do it with Javascript and maybe html + css

So i have made a popup with text an img. It works when i only have ''Biografi'', but when i add ''Contact'' i don't know how to make it possible with the javascript to have 2 different popup of both ''Biografi and ''Contact''. Can someone pls help me with this pls? Because when i click ''Biografi'' the same comes up as if i would have clicked ''Contact''
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";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var modal = document.getElementById('myModal1');
var btn = document.getElementById("myBtn1");
var span = document.getElementsByClassName("close1")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
.text4 > a {
text-decoration: underline;
text-decoration-color: #fad184;
text-decoration-style: dotted;
color: #fad184;
}
.text4 > a:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: relative;
background-color: brown;
color: #fad184;
font-family: verdana;
margin: auto;
padding: 0;
border: 1px solid #fff;
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
}
#-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}
}
.close {
color: #fad184;
float: right;
font-size: 28px;
font-weight: bold;
margin-right: 10px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: brown;
color: #fad184;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: brown;
color: #fad184;
}
<div class="div5">
<p id="myBtn" class="text4">Biografi</p>
<p id="myBtn1" class="text4">Contact</p>
<p class="text4">hey</p>
<p class="text4">hey</p>
<p class="text4">hey</p>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="div1">
<div class="close1">×</div>
<div class="div2" style="margin-top:10px; margin-bottom:10px;">
<div class="div11">
<div class="div13">
<img src="ungeferrari1.jpg" class="img3">
</div>
<div class="div12">
<div style="margin-left:15px">
<p class="textbio1">Biografi:</p>
<p class="textbio2">25-åringen Unge Ferrari aka Stig J. Haugen er en norsk rapper fra Hamar i Norge.
Han vokste opp i et vanekslig miljø.
Som 8 åring begynte han å fatte interesse for rapping og starter og preformer i en alder av 16 år.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal">
<div class="modal-content">
<div class="div1">
<div class="close">×</div>
<div class="div2" style="margin-top:10px; margin-bottom:10px;">
<div class="div11">
<div class="div13">
<img src="ungeferrari1.jpg" class="img3">
</div>
<div class="div12">
<div style="margin-left:15px">
<p class="textbio1">Biografi:</p>
<p class="textbio2">25-åringen Unge Ferrari aka Stig J. Haugen er en norsk rapper fra Hamar i Norge.
Han vokste opp i et vanekslig miljø.
Som 8 åring begynte han å fatte interesse for rapping og starter og preformer i en alder av 16 år.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

You have multiple problems.
The main things I fixed to get this working:
In both sets of handlers you referred to the modal variable-- as that variable can only been one thing at one time. As such, I instead encapsulated both button setups in functions to encapsulate a local modal var assignment
You had duplicate content in both modals, so you wouldn't have been able to tell the difference regardless
You had swapped the close buttons between the two modals.
Additionally, you really need to rethink your naming conventions for classes and IDs. Simply numbering them div1, div2, etc has zero semantic meaning-- it won't scale or maintain easily, nor will it be easy to remember if you leave and come back to it. Instead, try classing and id-ing for what things are and do -- semantic naming.
Finally, please remember that Java and JavaScript are different, unrelated languages. :) Good luck!
function setupFirstBtn() {
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";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
function setupSecondBtn () {
var modal = document.getElementById('myModal1');
var btn = document.getElementById("myBtn1");
var span = document.getElementsByClassName("close1")[0];
btn.onclick = function() {
modal.style.display = "block";
}
span.onclick = function() {
modal.style.display = "none";
}
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
}
setupFirstBtn();
setupSecondBtn();
.text4 > a {
text-decoration: underline;
text-decoration-color: #fad184;
text-decoration-style: dotted;
color: #fad184;
}
.text4 > a:hover {
opacity: 0.7;
}
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0,0.4);
}
.modal-content {
position: relative;
background-color: brown;
color: #fad184;
font-family: verdana;
margin: auto;
padding: 0;
border: 1px solid #fff;
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
}
#-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}
}
.close {
color: #fad184;
float: right;
font-size: 28px;
font-weight: bold;
margin-right: 10px;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: brown;
color: #fad184;
}
.modal-body {padding: 2px 16px;}
.modal-footer {
padding: 2px 16px;
background-color: brown;
color: #fad184;
}
<div class="div5">
<p id="myBtn" class="text4">Biografi</p>
<p id="myBtn1" class="text4">Contact</p>
<p class="text4">hey</p>
<p class="text4">hey</p>
<p class="text4">hey</p>
</div>
<div id="myModal" class="modal">
<div class="modal-content">
<div class="div1">
<div class="close">×</div>
<div class="div2" style="margin-top:10px; margin-bottom:10px;">
<div class="div11">
<div class="div13">
<img src="ungeferrari1.jpg" class="img3">
</div>
<div class="div12">
<div style="margin-left:15px">
<p class="textbio1">Biografi:</p>
<p class="textbio2">25-åringen Unge Ferrari aka Stig J. Haugen er en norsk rapper fra Hamar i Norge.
Han vokste opp i et vanekslig miljø.
Som 8 åring begynte han å fatte interesse for rapping og starter og preformer i en alder av 16 år.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="myModal1" class="modal">
<div class="modal-content">
<div class="div1">
<div class="close1">×</div>
<div class="div2" style="margin-top:10px; margin-bottom:10px;">
<div class="div11">
<div class="div13">
<img src="ungeferrari1.jpg" class="img3">
</div>
<div class="div12">
<div style="margin-left:15px">
<p class="textbio1">CONTACT:</p>
<p class="textbio2">CONTACTCONTACTCONTACT</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>

Creating modal window for displaying videos

Stuck at creating a modal window and make it pop on click. The modal items are not even displaying at my browser, but they do in JSFid. Is it the browser or is it the code? Also curious what exactly am I doing wrong, trying for quite a lot.The HTML:
<section id="modals">
<button id="myBtn">Open Modal</button>
<div id="myModal" class="modal">
<div>
<div class="modal-content">
<span class="close">×</span>
<div class="modal clearfix">
<div class="modal-menu">
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
<div class="modal-menu-item">Video</div>
</div>
<div class="modal-content">
<div class="modal-header">Header</div>
<div class="modal-body">Body</div>
<div class="modal-footer">Footer</div>
</div>
</div>
</div>
</div>
</div>
The CSS:
.modal{
box-sizing: border-box;
width: 500px;
height: 300px;
background: gray;
}
.modal:before{
box-sizing:inherit;
}
.modal-menu,
.modal-content {
height: 100%;
float: left;
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
.modal-menu {
width: 20%;
background: #257562;
overflow: auto;
}
.modal-content {
width: 80%;
padding: 50px 0;
position: relative;
background: blue;
}
.modal-header,
.modal-footer {
width: 100%;
height: 50px;
position: absolute;
left: 0;
}
.modal-header {
top: 0;
background: #E85C74;
}
.modal-body {
height: 100%;
background: #F9D24F;
}
.modal-footer {
bottom: 0;
background: #752570;
}
.modal-menu-item {
width: 100%;
height: 50px;
margin-bottom: 15px;
background: #F48829;
}
.modal-menu-item:last-of-type {
margin-bottom: 0;
}
The JS:
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 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";
}
}

If you are using Bootstrap modal you must include JQuery Library in your page and try the below code for hide/show modal::
$('#myModal).modal('show'); // For displaying the modal
$('#myModal').modal('hide'); // For hiding the modal

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.

Attmepting to close a popup using javascript - javascript

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.

Related

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

Don't know how to do it with Javascript and maybe html + css

Creating modal window for displaying videos

JavaScript not working in aspx C# webpage

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

Categories

Resources