Dynamic Splash Page Using HTML CSS & Javascript with source Code
Hello Friends, lets us learn splash screen effects using Html, CSS & javascript. Now days we saw all major web sites like news sites, astrology sites, conference... etc uses of One time open pop-up (a small window) open. Now we are going to create so lets us start first Css page then Html page Then Javascript.
There are some segments of One time open pop-up page, collcet it in one page and run your browser.
Css Part:
#popup0 {
visibility: hidden;
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
text-align: center;
z-index: 200;
}
#popup0 .box-area {
width: 700px;
margin: 100px auto;
background-color: #c04204;
background: -webkit-gradient(radial, center center, 0, center center, 460, from(#fd3803), to(#c04204));
background: -webkit-radial-gradient(circle, #fd3803, #c04204);
background: -moz-radial-gradient(circle, #fd3803, #c04204);
background: -ms-radial-gradient(circle, #fd3803, #c04204);
border: 5px solid #fff;
text-align: center;
-moz-box-shadow: inset 0 0 15px 10px #802c03;
-webkit-box-shadow: inset 0 0 15px 10px #802c03;
box-shadow: inset 0 0 15px 10px #802c03;
border-radius: 5px;
}
.close {
margin: -20px 0px 0 690px;
position: absolute;
display: block;
width: 30px;
height: 30px;
box-shadow: 0 0 0px #666;
border-radius: 100%;
background:url(close-button.png)no-repeat;
}
#popup0 h2 {
display: block;
padding-left: 15px;
margin: 0px auto 10px;
font-size: 36px;
color: #fff;
text-align:left;
}
#popup0 h3 {
display: block;
padding-left: 15px;
margin: 0px auto 10px;
font-size: 18px;
color: #fff;
text-align:left;
}
.header-area {
border-bottom: 0px solid #ddd;
padding: 10px 0 0;
}
.footer-area {
border-top: 0px solid #ddd;
padding: 10px 0;
}
.col2 {
float: right;
width: 100%;
height: 400px;
}
#overlay0 {
visibility: hidden;
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
background: #000;
filter: alpha(Opacity = 70);
opacity: 0.7;
-moz-opacity: 0.7;
-khtml-opacity: 0.7;
z-index: 1;
}
HTML Part:
< div id="overlay0">< /div>
< div id="popup0">
< div class="box-area">
Your All pop-up page informetion will be here.
< div style="clear: both">
< /div>
< /div>
< /div>
Javsscript Part:
var interval = 20 * 20;
function MyTimer() {
//alert("Deepak Madheshiya");
var timeOutValue = setTimeout(function () {
showPopup('');
}, interval);
return timeOutValue;
}
function createCookie(name, value, days) {
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
var expires = "; expires=" + date.toGMTString();
}
else var expires = "";
document.cookie = name + "=" + value + expires + "; path=/";
}
function readCookie(name) {
return null;
}
function setUrlCookies() {
MyTimer();
}
var ADV_CODE = "01";
var advcode;
var cookiesname = ["ishowadv0"];
var cookiesvalues = new Array();
var overlayid = ["overlay0"];
var popupid = ["popup0"];
function showPopup() {
var datetime = new Date();
for (var i = 0; i < cookiesname.length; i++) {
cookiesvalues[i] = readCookie(cookiesname[i]);
if (cookiesvalues[i] == "" || cookiesvalues[i] == null) {
advcode = cookiesname[i];
ovr = document.getElementById(overlayid[i]);
pop = document.getElementById(popupid[i]);
ovr.style.visibility = (ovr.style.visibility == "visible") ? "hidden" : "visible";
pop.style.visibility = (pop.style.visibility == "visible") ? "hidden" : "visible";
createCookie("lastadvshowonday", datetime.getDate(), 1);
break;
}
}
}
function closePopup(tag, tagvalue, overlayidpass, popupidpass) {
document.getElementById(overlayidpass).style.visibility = 'hidden';
document.getElementById(popupidpass).style.visibility = 'hidden';
CreateClickSession(tag, tagvalue);
}
function CreateClickSession(tagname, tagvalue) {
createCookie(advcode, "false", 1);
}
