So I have been trying this for hours since I have no huge experience in JavaScript. Basically, I have modified a CSS and HTML codes for the pop up, that I found on the web. However, I would love to make the pop up to show up 10 seconds after a page load. I have tried lots of methods, but none of them gave me the result I wanted. Actually, none of them worked, even partially. Here is the latest method, which also didn't work.
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}@charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(***.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="popup('popUpDiv')">
<div id="container">
<div id="mainContent">
<p><strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
<a href="http://stackoverflow.com/" class="amazonis-knopka">Link...</a>
</div>
<a href="#" onclick="popup('popUpDiv')">Click Here To Open The Pop Up</a>
</div>
</div>
</body>
</html>The setTimeout code is the following:
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
I thought maybe if I could load the pop up with the <script> code it would be very helpful, because I don't really like that the pop up is being loaded with the body tag: <body onload="popup('popUpDiv')">
But, I could not manage to do that, because the pop up does not load after I try to load it with the function. Maybe I was doing it wrong, but I have tried everything I could think of, and almost everything I found on web.
I know I have a lot of other mistakes other than the pop up, I am still working on them.
Sorry for not being very specific and copying entire codes, but without those I thought it would be hard to figure out what I was trying to do. Thank you.
