Im trying to make popup with adsence in middle of overlay with countdown of 20s. If user clicks on ad and getting redirected to adsence site page saves user choise to hide ad in future for xxx. It does work with regular links but after putting adsence script it doesnt dismiss overlay or save any of userschoise.
<!DOCTYPE html>
<html>
<head>
<title>Popup Overlay Example</title>
<style>
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
z-index: 9999;
display: flex;
justify-content: center;
align-items: center;
}
#block {
width: 300px;
height: 250px;
background-color: white;
display: flex;
justify-content: center;
align-items: center;
font-size: 24px;
cursor: pointer;
}
#countdown {
color: white;
font-size: 48px;
margin-bottom: 20px;
}
</style>
</head>
<body>
<div id="overlay">
<div id="block">
<script async="" src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-xxxxxxxxxxxxxxxx" crossorigin="anonymous"></script>
<!-- 300x250 blocks -->
<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px;z-index: 99999999;" data-ad-client="ca-pub-xxxxxxxxxxxxxxxxx" data-ad-slot="xxxxxxxxxxx"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<div id="countdown">
20
</div>
</div>
<script>
document.addEventListener("DOMContentLoaded", function() {
var now = Date.now();
var userChoiceTime = localStorage.getItem("userChoiceTime");
if (userChoiceTime && (now - userChoiceTime < 50000)) {
document.getElementById("overlay").style.display = "none";
} else {
var overlay = document.getElementById("overlay");
var block = document.getElementById("block");
var countdown = 20;
var countdownTimer;
block.addEventListener("click", function() {
closeOverlay();
});
function closeOverlay() {
overlay.style.display = "none";
localStorage.setItem("userChoiceTime", now);
}
function startCountdown() {
var countdownElement = document.getElementById("countdown");
countdownElement.innerHTML = countdown;
countdownTimer = setInterval(function() {
countdown--;
countdownElement.innerHTML = countdown;
if (countdown === 0) {
closeOverlay();
}
}, 1000);
}
startCountdown();
}
});
</script>
</body>
</html>
Can anyone help me solving this one?
Related
I don't want a button I want a timer instead that counts down 5 seconds then the javascript function executes on page load
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/app.min.css" />
<title>
Test
</title>
</head>
<body>
<!-- I don't want a button I want a timer instead that counts down 5 seconds then the javascript function executes -->
<button onclick="myFunction()">Click Me</button>
<div id="myDIV", class="myDIV">
Initializing Hide
</div>
<div id="myDIVS", class="myDIVS">
Hide Successful
</div>
<script type="text/javascript">
function myFunction(){
var target = document.getElementById("myDIV");
var show = document.getElementById("myDIVS");
if(target.style.display = "none"){
// target.style.display = "block";
show.style.display = "block";
}else{
show.style.display = "block";
}
}
</script>
</body>
<style>
.myDIV{
background-color: aqua;
margin: 30px;
padding: 50px 30px;
/* display: none; */
}
.myDIVS{
background-color: green;
margin: 30px;
padding: 50px 30px;
display: none;
}
</style>```
You need to use setTimeout(). Just put the onClick code inside this, also I have corrected the = vs. == mistake.
function myFunction() {
var target = document.getElementById("myDIV");
var show = document.getElementById("myDIVS");
if (target.style.display == "none") {
target.style.display = "block";
show.style.display = "none";
} else {
target.style.display = "none";
show.style.display = "block";
}
}
setTimeout(myFunction, 5000);
.myDIV {
background-color: aqua;
margin: 30px;
padding: 50px 30px;
/* display: none; */
}
.myDIVS {
background-color: green;
margin: 30px;
padding: 50px 30px;
display: none;
}
<div id="myDIV" class="myDIV">
Initializing Hide
</div>
<div id="myDIVS" class="myDIVS">
Hide Successful
</div>
Wait for five seconds and see?
I'm practicing js and for long time i cant solve problem bellow.
I have function for changing the blurry background "changeBg", but it does not work when called.
Also key event function are not working dont know why.
I will appreciate any hints where to search for problems.
I know the code is wet but it's far from end "product".
//counting img tags
var n = $("img").length;
var m = n - 2;
//alert("jest " + m + "tagow img");
//adding onclick to source of file
var source = $(".slider-inner > img").attr("src");
$(".slider-inner > img").attr("onclick", "location.href=\'" + source + "\'");
for (i = 1; i <= m; i++) {
$(".dotcontainer").append($("<div class=\"dot\">x</div>"));
$('.slider-inner img').attr('id', function (i) {
return 'x' + (i + 1);
});
$('.dotcontainer div').attr('id', function (i) {
return 'x' + (i + 1);
});
var url = $('.slider-inner img:nth-child(' + i + ')').attr("src");
console.log(i);
}
///temporary solution for initial background
$(".bg").css('background', "url('"+ source +"')");
$(".bg").css('background-repeat', "no-repeat");
$(".bg").css('background-size', "cover");
$(".bg").css('background-position', "center");
//making first dot active
$('.dotcontainer div:nth-child(' + 1 + ')').addClass('activee');
//function changing backgorund
function changeBg() {
$(".bg").css('background', "url('"+ source +"')");
$(".bg").css('background-repeat', "no-repeat");
$(".bg").css('background-size', "cover");
$(".bg").css('background-position', "center");
};
// next buttton
$('.next').on('click', function nextImage() {
var currentImg = $('.active');
var nextImg = currentImg.next();
var currentdot = $('.activee');
var nextdot = currentdot.next();
if (nextImg.length) {
currentImg.removeClass('active').css('z-index', -10);
nextImg.addClass('active').css('z-index', 10);
currentdot.removeClass('activee');
nextdot.addClass('activee');
var source = nextImg.attr("src");
nextImg.attr("onclick", "location.href=\'" + source + "\'");
changeBg();
} else {
currentImg.removeClass('active').css('z-index', -10);
$('#x1').addClass('active').css('z-index', 10);
currentdot.removeClass('activee');
$('.dotcontainer div:nth-child(' + 1 + ')').addClass('activee');
}
});
//prev button
$('.prev').on('click', function prevImage() {
var currentImg = $('.active');
var prevImg = currentImg.prev();
var currentdot = $('.activee');
var prevdot = currentdot.prev();
var n = $("img").length;
var m = n - 2;
if (prevImg.length) {
currentImg.removeClass('active').css('z-index', -10);
prevImg.addClass('active').css('z-index', 10);
currentdot.removeClass('activee');
prevdot.addClass('activee');
changeBg();
} else {
currentImg.removeClass('active').css('z-index', -10);
$('.slider-inner img:nth-child(' + m + ')').addClass('active').css('z-index', 10);
currentdot.removeClass('activee');
$('.dotcontainer div:nth-child(' + m + ')').addClass('activee');
}
});
//switch active dots
$(".dot").click(function (event) {
$('.activee').attr('class', 'dot');
$(this).attr('class', 'dot activee');
var aktkrop = $(".activee").attr("id");
var fotoa = $('.slider-inner .active').attr("id");
$(".active").removeClass("active");
$("#" + aktkrop).attr("class", "active")
});
//temp shadowbox temporary solution
$('.btn').on('click', function () {
$(".boxx").css("display", "block");
});
$('.close').on('click', function () {
$(".boxx").css("display", "none");
});
document.addEventListener('keydown',function(e){
if (e.keyCode === 37) {
prevImage();
} else if(e.keyCode === 39) {
nextImage();
}
});
body {
font-family: "Arial", sans-serif;
font-size: 14px;
color: #fff;
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.bg{
z-index: -2;
position: absolute;
width: 100%;
height: 100%;
filter: blur(30px);
-webkit-filter: blur(30px);
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
margin: 0;
padding: 0;
}
.blackshadow{
z-index: -1;
position: absolute;
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
}
a {
color: #fff;
text-decoration: none;
}
h1 {
text-align: center;
}
.container {
width: 540px;
margin: 40px auto;
overflow: auto;
}
.slider-inner {
width: 500px;
height: 300px;
position: relative;
overflow: hidden;
float: left;
padding: 3px;
border: #666 solid 1px;
}
.slider-inner img {
display: none;
width: 500px;
height: 300px;
}
.slider-inner img.active {
display: inline-block;
}
.prev,
.next {
float: left;
margin-top: 130px;
cursor: pointer;
}
.prev {
position: relative;
margin-right: -45px;
z-index: 100;
}
.next {
position: relative;
margin-left: -45px;
z-index: 100;
}
.buba {
display: flex;
align-items: center;
justify-content: center;
}
.dotcontainer {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
justify-content: center;
}
.dot {
cursor: pointer;
margin: 5px;
width: 20px;
height: 20px;
background-color: gray;
border-radius: 50%;
text-align: center;
justify-content: center;
color: black;
font-weight: 800;
}
.activee {
background-color: white;
}
.boxx {
width: 100%;
height: 100%;
background-color: black;
opacity: 0.6;
position: fixed;
z-index: 11;
margin: 0;
padding: 0;
display: none;
}
.close {
margin-left: 300px;
margin-top: 300px;
z-index: 11;
}
<html>
<head>
<title>Page Title</title>
<meta charset="UTF-8">
<meta name="viewport" content="initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://code.jquery.com/jquery-3.1.1.js" integrity="sha256-16cdPddA6VdVInumRGo6IbivbERE8p7CQR3HzTBuELA="
crossorigin="anonymous"></script>
</head>
<body>
<div class="bg"></div>
<div class="blackshadow"></div>
<div class="boxx">
<div class="closee">
<button class="close">Close</button>
</div>
</div>
<button class="btn">Kliknij</button>
<div class="container">
<h1>JQSlider</h1>
<div class="slider-outer">
<img src="http://www.fotem.pl/data/7d87e07a3066629171add66003d.png" id="prev" class="prev" alt="Prev">
<div class="slider-inner">
<img src="https://cdn.pixabay.com/photo/2018/01/14/23/12/nature-3082832_1280.jpg" class="active">
<img src="https://cdn.pixabay.com/photo/2015/12/01/20/28/green-1072828_1280.jpg">
<img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885_1280.jpg">
<img src="https://cdn.pixabay.com/photo/2015/06/19/21/24/the-road-815297_1280.jpg">
<img src="https://cdn.pixabay.com/photo/2015/01/28/23/35/landscape-615429_1280.jpg">
<img src="https://cdn.pixabay.com/photo/2019/09/30/14/51/squirrel-4515962_1280.jpg">
<img src="https://cdn.pixabay.com/photo/2016/07/22/16/29/fog-1535201_1280.jpg">
<img src="https://cdn.pixabay.com/photo/2016/11/23/13/48/beach-1852945_1280.jpg">
</div>
<img src="http://www.fotem.pl/data/6f1498615d84ca14dbf0de784bd.png" id="next" class="next" alt="Next">
</div>
</div>
<div class="dotcontainer">
</div>
</body>
<script type="text/javascript" src="script.js">
</script>
</html>
Thank you in advance.
Code:
https://codepen.io/odzeradodeveloperajava/pen/EMLbzz
The background did not change as the source variable was not up-to date with the image src. You will need to ensure, that the source is not only declared once, but the value in it will always be updated on every event.
The keyup event handler is throwing exceptions as it cannot access the nextImage() and prevImage() methods. You will need to separate the methods and re-use them when needed as callBackFunction or just call it directly:
function prevImage() {
// code inside
}
function nextImage() {
// code inside
}
$('.next').on('click', nextImage);
$('.prev').on('click', prevImage);
document.addEventListener('keyup', function (e) {
if (e.keyCode === 37) {
prevImage();
} else if (e.keyCode === 39) {
nextImage();
}
});
I've made several changes to the example you've shared. Here is a working Pen: https://codepen.io/attila-antal/pen/KKKVGEd
first of all you have to declare your function nextImage and prevImage outside of the event listener. for example:
function nextImage() {
// your code
}
$('.next').on('click', nextImage);
The background does not change because you have to pass new source to your function. for example:
function changeBg(source) {
// your code
}
When you want to invoke changeBg function you should pass new source: for example: changeBg(newImageUrl);
I would like to use timeUpdate and currentTime to be able to show and hide a div at a certain time when a video is playing.
I have managed to get something working, however it seems to show and hide for each second I want it to show for.
I have attached the code below... is there any way i can have it shown without it showing and hiding for each second?
var video_one = document.getElementById('video_one'),
video_two = document.getElementById('video_two'),
video_one_wrapper = document.getElementById('video_one_wrapper'),
video_two_wrapper = document.getElementById('video_two_wrapper'),
play_button = document.getElementById('play_button');
// add event listener to play button
play_button.addEventListener('click', play_videos);
// run function on click
function play_videos() {
video_one.play();
video_two.play();
}
var switch_button = document.getElementById('switch_button');
switch_button.addEventListener('click', switch_videos);
function switch_videos() {
console.log('click');
if(video_one_wrapper.classList.contains('video_active')) {
console.log('it contains');
video_one_wrapper.classList.remove('video_active');
video_two_wrapper.classList.add('video_active');
} else if(video_two_wrapper.classList.contains('video_active')) {
video_two_wrapper.classList.remove('video_active');
video_one_wrapper.classList.add('video_active');
console.log('it doesnt')
}
}
video_one.addEventListener("timeupdate", message_one);
video_two.addEventListener("timeupdate", message_two);
var message_one = document.getElementById("message_one"),
message_two = document.getElementById("message_two");
function message_one() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
function message_two() {
// if time between 10s and 20s
if(this.currentTime > 1 && this.currentTime < 20) {
if(message_two.classList.contains("message_hide")) {
message_two.classList.remove("message_hide");
} else {
message_two.classList.add("message_hide")
}
}
}
body {
margin: 0;
font-family: "Helvetica Neue";
font-size: 16px;
color: #FFF;
background-color: #242424;
}
.landing {
width: 100vw;
height: 100vh;
}
.landing_wrapper {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.title_wrapper {
text-align: center;
}
.title_wrapper > h1 {
font-size: 46px;
text-transform: uppercase;
letter-spacing: 2px;
color: #FFF;
}
.title_wrapper > button {
background-color: #FFF;
border: none;
outline: none;
font-size: 16px;
text-transform: uppercase;
padding: 10px 20px;
}
video {
width: 100%;
z-index: 100;
}
.video {
position: relative;
width: 100vw;
height: 100vh;
}
.video_wrapper {
position: relative;
top:0;
left: 0;
width: 100%;
height: 100%;
}
.video_item {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 99;
}
.switch_wrapper {
z-index: 100;
position: absolute;
top:0;
left: 0;
}
.video_element {
z-index: 100;
}
.message_wrapper {
position: absolute;
top: 0;
left: 0;
z-index: 200;
}
.message_hide {
display: none;
}
.video_one {
z-index: 0;
}
.video_two {
z-index: 0;
}
.video_active {
z-index: 10;
}
.video_three {
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Title Here</title>
<meta name="description" content="The HTML5 Herald">
<meta name="author" content="SitePoint">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="landing">
<div class="landing_wrapper">
<div class="title">
<div class="title_wrapper">
<h1>Title Here</h1>
<button id="play_button">Start</button>
</div>
</div>
</div>
</div>
<div class="video">
<div class="switch_wrapper"><button id="switch_button">Switch</button></div>
<div class="video_wrapper">
<div id="video_one_wrapper" class="video_item video_active">
<div id="message_one" class="message_wrapper message_hide"><h1>Hello Video 1</h1></div>
<video id="video_one" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/girl_1_zps8ud1zuxh.mp4" loop >
</div>
<div id="video_two_wrapper" class="video_item">
<div id="message_two" class="message_wrapper message_hide"><h1>Hello Video 2</h1></div>
<video id="video_two" class="video_element" src="http://vid1308.photobucket.com/albums/s607/Billy_Adam_Skinner/boy_zpsugnp76od.mp4" muted loop>
</div>
</div>
</div>
<script src="js.js"></script>
</body>
</html>
The timeupdate event occurs when the playing position of an audio/video has changed.
Example. When video is playing . This function message_one always is calling every time (second) when video is playing. I will give you example step
currentTime = 1 s
message_one function called
message_one element doesn't contain class "message_hide"
message_one element add class "message_hide"
currentTime increases to 2s
message_one function called
message_one element now is containing class "message_hide" .
message_one.classList.add("message_hide") this will call. it makes message hide
And again when currentTime update it will change, it makes the message show hide loop
Your current function
function message_one() {
// if time between 10s and 20s
if (this.currentTime > 1 && this.currentTime < 20) {
if (message_one.classList.contains("message_hide")) {
message_one.classList.remove("message_hide");
} else {
message_one.classList.add("message_hide")
}
}
}
I suggest one way to resolve
if (this.currentTime > 0 && this.currentTime < 20) {
message_two.classList.remove("message_hide");
}
else {
message_two.classList.add("message_hide")
}
I'm writing a small gallery/slideshow page that should change through its images using the left or right arrow keys. Currently, the code works somewhat, but does not change through all of its images. Why is this? How can it be fixed?
Images for sample test :
[
'http://i.imgur.com/co6MlSo.jpg',
'http://i.imgur.com/gCxcOKi.jpg',
'http://i.imgur.com/lsu7ZSw.jpg',
'http://i.imgur.com/pwysNhX.jpg'
];
Code :
<html>
<head>
<title>gallery</title>
<style type="text/css">
html, body{
background: #333333;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial Black;
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
img{
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
</style>
</head>
<body>
<div class="container">
<div id="slideshow">
<img
alt="slideshow"
src="co6MlSo.jpg"
id="imgClickAndChange"
onclick="changeImage()"
/>
</div>
</div>
<script>
var images = [
"co6MlSo.jpg",
"gCxcOKi.jpg",
"lsu7ZSw.jpg",
"pwysNhX.jpg"
];
function changeImage(dir){
var img = document.getElementById("imgClickAndChange");
img.src = images[images.indexOf(img.src) + (dir || 1)] || images[dir ? images.length - 1 : 0];
}
document.onkeydown = function(e){
e = e || window.event;
if (e.keyCode == '37'){
changeImage(-1) // left to display previous image
}else if (e.keyCode == '39'){
// right to display next image
changeImage()
}
}
</script>
</body>
</html>
You could add conditions like :
if(dir=='next'){
index++;
}else{
index--;
}
if(index>images_length){
index=0;
}else if(index<0){
index=images_length;
}
img.src = images[index];
Hope this helps.
var images = ["http://i.imgur.com/co6MlSo.jpg","http://i.imgur.com/gCxcOKi.jpg","http://i.imgur.com/lsu7ZSw.jpg","http://i.imgur.com/pwysNhX.jpg"];
var index = 0;
var images_length = images.length-1;
function changeImage(dir){
var img = document.getElementById("imgClickAndChange");
if(dir=='next'){
index++;
}else{
index--;
}
if(index>images_length){
index=0;
}else if(index<0){
index=images_length;
}
img.src = images[index];
}
document.onkeydown = function(e){
e = e || window.event;
if (e.keyCode == '37'){
changeImage('prev');
}else if (e.keyCode == '39'){
changeImage('next');
}
}
html, body{
background: #333333;
height: 100%;
margin: 0;
padding: 0;
font-family: Arial Black;
font-size: 18px;
line-height: 1.5;
text-align: justify;
}
img{
padding: 0;
display: block;
margin: 0 auto;
max-height: 100%;
max-width: 100%;
}
<div class="container">
<div id="slideshow">
<img
alt="slideshow"
src="http://i.imgur.com/co6MlSo.jpg"
id="imgClickAndChange"
onclick="changeImage()"
/>
</div>
</div>
Currently the Overlay only closes upon clicking button 'X'. I would like it to close when clicking outside the overlay or if the page is refreshed.
The other thing I have tried at least 100 times and miserably failed, is to keep the hover effect (color #F00) intact when the overlay is active. I have tried
.active{
color:#F00;
}
but it seems that this only works for the split second the link is clicked on.
The Javascript is as following:
<script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .7;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
</script>
The CSS is as following:
<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>
The HTML is as following:
<!-- 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 class="btn" onmousedown="toggleOverlay()">HIGHEST QUALITY</button>
</div>
<!-- End Normal Page Content -->
Your help will be strongly appreciated!
Keep in mind this is a quick fix for your problem and wrote it to show you some basics in javascript
document.onclick = function(event) this triggers on any mouse click on the document.
var target = getTarget(event); this calls the function that will return what element was clicked
What the function does
Since all your elements have an id we are checking to see if the id is blank. If there is no idea it is than outside your elements so close the div
I added an id to your button so we could change the color from black to red
<!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>