HTML - Close pop up when clicking outside the div? - javascript

Got this script, but wondering what kind of function I need to add to make it close when clicking outside the box? Do I need to add another div and try to trigger that to make it close or?
Sorry I'm clueless considering writing javascript, I just understand how the events are created by the .onclick events but that's about it.
var closePopup = document.getElementById("popupclose");
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
var button = document.getElementById("button");
// Close Popup Event
closePopup.onclick = function () {
overlay.style.display = 'none';
popup.style.display = 'none';
};
// Show Overlay and Popup
button.onclick = function () {
overlay.style.display = 'block';
popup.style.display = 'block';
}
#overlay {
display: none;
position: absolute;
top: 0;
bottom: 0;
background: #99999945;
width: 100%;
height: 100%;
opacity: 0.8;
z-index: 100;
}
#popup {
display: none;
position: absolute;
top: 25%;
background: #fff;
width: 80%;
margin-left: 10%;
z-index: 200;
border-radius: 4px;
}
#popupclose {
float: right;
padding: 2px;
cursor: pointer;
}
.popupcontent {
padding: 10px;
}
#button {
cursor: pointer;
}
<button id="button" class="button btn--primary">Open div</button>
<div id="overlay"></div>
<div id="popup">
<div class="popupcontrols">
<span id="popupclose">Close X</span>
</div>
<div class="popupcontent">
Content inside popup
</div>
</div>

You could add a click-handler for the overlay element since that should cover all of the "outside" areas.
overlay.onclick = function () {
overlay.style.display = 'none';
popup.style.display = 'none';
};

Related

How to overlap two divs in HTML (success message when logged in)?

I am building a little login page and when successfully logged in I want a massage to pop up (not an alert). I just want to have that message in the center of the page after I logged in.
Is there a way to implement that easily?
picture of the website now
This little message window should be in the middle of the page
I would call this a modal.
const overlay = document.querySelector("#overlay");
const button = document.querySelector("#button");
const closeButton = document.querySelector(".close");
button.onclick = () => { overlay.style.display = "grid"; }
closeButton.onclick = () => { overlay.style.display = ""; }
window.onclick = (e) => {
if (e.target === overlay) {
overlay.style.display = "";
}
}
.overlay {
position: fixed;
display: none;
z-index: 999;
left: 0;
top: 0;
width: 100vw;
height: 100vh;
background-color: rgba(100,100,100,0.4);
}
.modal {
background-color: #fff;
margin: auto;
padding: 1em;
border: 1px solid;
width: 80vw;
}
.close {
float: right;
font-weight: bold;
cursor: pointer;
}
<div id="overlay" class="overlay">
<div class="modal">
<button class="close">×</button>
Congrats u logged in
</div>
</div>
<button id="button">login</button>

Opening an external website in a modal popup

I know that Click here opens the link in a new tab (default behaviour in Chrome and Firefox) and that
<a href="http://www.example.com" onclick="window.open('http://www.example.com',
'newwindow', 'width=700,height=500'); return false;">Click here</a>
opens it in a new window.
But how to open an external page in a modal popup (centered on screen, rest of the original page "darkened")?
Is there a nice way to do it?
I tried the following code, but it doesn't seem to be working (click: popup opens, reclick, it closes, reclick on link: it doesn't open anymore. Also the iframe doesn't load).
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
setTimeout(function() {
document.getElementById('page').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
}
}, 100);
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
</div>
Based on Sphinx's great answer, here is what I'll use to create a modal popup displaying an external website in a iframe with a dark background for the rest of the page when the popup is open:
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }
<div id="main">
Click me<br>
</div>
<div id="popup"><iframe id="popupiframe"></iframe></div>
<div id="popupdarkbg"></div>
The root cause is page.onclick is registered after popup window is open at the first time, then the following 'open popup' will trigger a.onclick and page.onclick in a row, that caused the popup window is open then is closed directly.
The simple solution is add one parameter to control the state of the popup. if the popup is closed, do nothing in page.onclick.
To remove setTimeout, there are two solution:
added another parameter to control the state of the popup initialization.
Don't make <div id="page"> is the parent of <a id="popup">, so <a id="popup"> will not be triggered when clicked <div id="page">.
Below are two solutions:
I prefer the Solution2, it is better decoupling than
Solution1, every component foucs on its own jobs.
Solution 1: added isInit as the indicator if the popup already finished initialization.
PS: In the comment, you mentioned close the popup only when click on <div id="page">, to implement this in solution1, I think you have to bind the event =mouseout, mouseenter to judge where the mouse clicks.
document.getElementById("a").onclick = function(e) {
e.preventDefault();
var isInit = true; // indicates if the popup already been initialized.
var isClosed = false; // indicates the state of the popup
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById('page').onclick = function() {
if(isInit){isInit=false;return;}
if(isClosed){return;} //if the popup is closed, do nothing.
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
isClosed=true;
}
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
</div>
Solution 2: make <div id="page"> and <a id="popup"> is cousin not parent relations.
document.getElementById("popup").showpopup = function() {
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById("page").style.display = "block";
}
document.getElementById("a").onclick = function(e) {
e.preventDefault();
document.getElementById("popup").showpopup();
}
document.getElementById('page').onclick = function() {
if(document.getElementById("popup").style.display == "block") {
document.getElementById("popup").style.display = "none";
document.getElementById("page").style.display = "none";
document.getElementById('page').className = "";
}
};
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
#page {
display: none;
width: 100%; height: 100%;
top:0px; left:0px;
z-index: 9;
padding: 2em;
position: absolute;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
Click me<br>
Hello<br>
Hello<br>
<div id="page">
</div>
<div id="popup">
External website:
<iframe id="iframe"></iframe>
</div>
document.getElementById("a").onclick = function(e) {
e.preventDefault();
var isInit = true; // indicates if the popup already been initialized.
var isClosed = false; // indicates the state of the popup
document.getElementById("popup").style.display = "block";
document.getElementById('iframe').src = "http://example.com";
document.getElementById('page').className = "darken";
document.getElementById('page').onclick = function() {
if(isInit){isInit=false;return;}
if(isClosed){return;} //if the popup is closed, do nothing.
document.getElementById("popup").style.display = "none";
document.getElementById('page').className = "";
isClosed=true;
}
return false;
}
#popup {
display: none;
border: 1px black solid;
width: 400px; height: 200px;
top:20px; left:20px;
background-color: white;
z-index: 10;
padding: 2em;
position: fixed;
}
.darken { background: rgba(0, 0, 0, 0.7); }
#iframe { border: 0; }
html, body, #page { height: 100%; }
<div id="page">
Click me<br>
Hello<br>
Hello<br>
<div id="popup">
External website:
<iframe id="iframe"> height=“200”</iframe>
</div>
</div>

How to load a iframe only on button click

I want a youtube video Iframe only when "Watch Video" Button is clicked. Currently the video iframe loads in the background, when the page loads.
Note: I do not mean, play the video on button click. I mean, load the iframe on button click
https://jsfiddle.net/kz0xxe22/
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
You can change the src attribute to a data-src, then when you click the button, set src to data-src
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
var trailer = document.getElementById('trailervideo');
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
trailer.setAttribute('src', trailer.getAttribute('data-src'));
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color: #f2f2f2;
color: red;
font-weight: 600;
border: none;
/* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color: #e2e2e2;
cursor: pointer;
}
#trailerdivbox {
display: none;
width: 100%;
height: 100%;
position: fixed;
overflow: auto;
/* Enable Scrolling */
background-color: rgb(0, 0, 0);
/* Fallback color */
background-color: rgba(0, 0, 0, 0.4);
/* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width: 560px;
max-height: 315px;
width: 95%;
height: 95%;
left: 0;
right: 0;
margin: auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox">
<div class="videoWrapper">
<iframe id="trailervideo" class="trailervideo" width="560" height="315" data-src="https://www.youtube.com/embed/TDwJDRbSYbw" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
Simplest thing to do is add the src attribute when clicking the "Watch Trailer" button! :)
// Get the modal
var modal = document.getElementById('trailerdivbox');
// Get the button that opens the modal
var btn = document.getElementById("watchbutton");
// When the user clicks the button, open the modal
btn.onclick = function() {
modal.style.display = "block";
//Add "src" attribute by getting the video and setting it with setAttribute.
document.getElementsByClassName('trailervideo')[0].setAttribute('src', 'https://www.youtube.com/embed/TDwJDRbSYbw');
}
var trailerbox = document.getElementById("close");
trailerbox.onclick = function() {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
/* Watch Trailer Button CSS */
#watchbutton {
background-color:#f2f2f2;
color:red;
font-weight:600;
border: none; /* This one removes the border of button */
padding: 10px 12px;
}
#watchbutton:hover {
background-color:#e2e2e2;
cursor:pointer;
}
#trailerdivbox {
display:none;
width: 100%;
height:100%;
position:fixed;
overflow: auto; /* Enable Scrolling */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
max-width:560px;
max-height:315px;
width: 95%;
height: 95%;
left:0;
right:0;
margin:auto;
}
<button id="watchbutton">Watch Trailer &#9658</button>
<div id="close">
<div id="trailerdivbox" >
<div class="videoWrapper">
<iframe class="trailervideo" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>

Multiple Pop Ups But Only One Works... Why?

I'm struggling with this code and I think its a lack of understanding of js. When I attempt to replicate the code to make multiple buttons only the last one works correctly (the one with the highest numerical value). I attempted this way because all of the behaviors are done in ID tags so they are to be unique a bit of a work around I know... but i am still learning this. I'm not sure what is causing my troubles but I'm hoping you can help. Thank you for your time in advance
HTML
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
Popup contents here
<button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>
<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay2"></div>
<div id="popup2">
Popup contents here2
<button id="CloseBtn2">ClosePopup2</button>
</div>
<div>
some other content that will be behind the popup2
</div>
CSS
#overlay {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}
#popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}
#overlay2 {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}
#popup2 {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}
JS
window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
};
window.onload = function() {
document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";
}
};
You are using window.onload = function() {} twice. Merge those 2 window.onload and use it just once.
Your final code should look like this
window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";
}
};
Try merge those 2 window.onload and use it just once.
window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
}
document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";
}
};
Remove second occurance of window.onload = function() {.
window.onload = function() {
document.getElementById("LearnMoreBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn").onclick = function(){
var overlay = document.getElementById("overlay");
var popup = document.getElementById("popup");
overlay.style.display = "none";
popup.style.display = "none";
};
document.getElementById("LearnMoreBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "block";
popup.style.display = "block";
};
document.getElementById("CloseBtn2").onclick = function(){
var overlay = document.getElementById("overlay2");
var popup = document.getElementById("popup2");
overlay.style.display = "none";
popup.style.display = "none";
}
};
#overlay {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}
#popup {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}
#overlay2 {
display: none;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
z-index: 99999;
}
#popup2 {
display: none;
position: fixed;
left: 50%;
top: 50%;
width: 300px;
height: 150px;
margin-top: -75px;
margin-left: -150px;
background: #FFFFFF;
border: 2px solid #000;
z-index: 100000;
}
<button id="LearnMoreBtn">Learn More</button>
<div id="overlay"></div>
<div id="popup">
Popup contents here
<button id="CloseBtn">ClosePopup</button>
</div>
<div>
some other content that will be behind the popup
</div>
<button id="LearnMoreBtn2">Learn More2</button>
<div id="overlay2"></div>
<div id="popup2">
Popup contents here2
<button id="CloseBtn2">ClosePopup2</button>
</div>
<div>
some other content that will be behind the popup2
</div>

Close overlay on page refresh/revisit

I have the following HTML, CSS, and Javascript:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The overlay opens and closes just fine. However, if the overlay is opened and the user visits another page on the website, and returns to the original page where the overlay was, the overlay still remains open...Is there a way to make the overlay close upon refreshing the page and upon returning to the page having visited another one?
Any help is much appreciated :)
James
Try This using display none to the div which you want to hide while refreshing
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script type="text/javascript">
function getTarget(event){
target = (typeof window.event === "undefined")?event.target:window.event.srcElement;
return target;
}
document.onclick = function(event){
var target = getTarget(event);
if(target.id == ""){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
}
}
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
var button = document.getElementById('qualityButton');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
button.style.color="#000000";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
button.style.color="#ff0000";
}
}
</script>
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #A9A9A9;
position: fixed;
width: 879px;
height: 291px;
top: 50px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: fixed;
z-index: 3;
width: 719px;
height: 215px;
top: 88px;
left: 80px;
background: #FFF;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left: 24px;
}
</style>
<style type="text/css">
.btn {
cursor:pointer;
font-size:24px;
border:none;
color:#000
}
.btn:hover{
color:#F00;
}
</style>
<style type="text/css">
.x {
background-color:white;
cursor:pointer;
font:Arial;
font-size:14px;
color:red;
z-index: 4;
position: fixed;
top: 92px;
left: 766px;
}
</style>
</head>
<body>
<!-- Start Overlay -->
<div id="overlay" style="display: none"></div>
<!-- End Overlay -->
<!-- Start Special Centered Box -->
<div id="specialBox">
<button class="x" onmousedown="toggleOverlay()">X</button>
</div>
<!-- Start Special Centered Box -->
<!-- Start Normal Page Content -->
<div id="wrapper">
<button id="qualityButton" class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
</div>
</body>
</html>
The easiest way I can think of is using Localstorage to do the task. You can read more about localstorage Here
In your case you will have to save timestamp in the variable. And then you can have an if statement on your homepage which checks the time which has elapsed since last time the page was refreshed. Let's say if it is more than 10 minutes or maybe 30 minutes you can show the overlay again. The reason I am saying you will need timestamp is that you will have to unset the variable if the user visits again after some time and is not returning from with-in the website. There is no timeout function in localstorage so you will have to use a tweak like timestamp.
Another way is to save a value in $_SESSION and see if it is set to certain value. If it is then it means it is a returning user else its a new user. But I am not sure if your page is php or not therefore I have mentioned localstorage method first.
If you need any further assistance please do let me know.
In my opionion there are at least two solutions.
using coockies
using global function
Second solution:
create your "popup.js" and call it in html, of course. Your js will be:
var Popup = (function () {
var isVisible;
return {
init: function () {
isVisible = false;
},
show: function() {
....
},
hide: function() {
....
},
isVisible: function() {
return isVisible;
}
};
}());

Categories