Popup's usually used to gain attraction of the visitors and it is the most
common way of web marketing. You can use popups for publishing new
events or products etc. But sometimes popups may be a little irritating
to your website viewers. So instead of using normal popup, we can use popup
only when user visits the website for the first time. This popup is generally known as
First Visit popup. Let's create a First Visit popup.
Before creating the elements, we must understand the structure of
the required layout. The body onload() event will fire after all
elements are loaded into the DOM.
3 layer structure is needed for this method.
1. Background Layer, which is the site itself
2. Fake Background Mask Layer, which lies between background and the popup and helps to gain viewers attention towards the popup.
3. Our stylish popup!
The html code will be:
CSS is:
common way of web marketing. You can use popups for publishing new
events or products etc. But sometimes popups may be a little irritating
to your website viewers. So instead of using normal popup, we can use popup
only when user visits the website for the first time. This popup is generally known as
First Visit popup. Let's create a First Visit popup.
Before creating the elements, we must understand the structure of
the required layout. The body onload() event will fire after all
elements are loaded into the DOM.
3 layer structure is needed for this method.
1. Background Layer, which is the site itself
2. Fake Background Mask Layer, which lies between background and the popup and helps to gain viewers attention towards the popup.
3. Our stylish popup!
The html code will be:
<div id="module"> <div style="top: 200px; left: 550px; display: none;" id="response" class="real-background"> HTML Explorer Demo Pop-up Window | <a href="#" class="close">Close</a> </div> <!-- This element will display as an intermediate layer between the pop-up and the background. --> <div style="width: 1500px; height: 599px; display: none; opacity: 0.7;" id="fake-background"></div> </div>
CSS is:
#module .real-background {
width:440px;
height:200px;
position:absolute;
z-index:9999;
padding:20px;
left:0;
top:0;
display:none;
}
#module #response {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
#fake-background {
z-index:9000;
background-color:#000;
display:none;
position:absolute;
left:0;
top:0;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
body {
font-family:verdana;
font-size:15px;
}
The following JQuery will do the magic.$(document).ready(function () {
/Set height and width to fill the mask layer under the pop-up
$('#fake-background').css({
'width': $(window).width(),
'height': $(document).height()
});
/transition effect
$('#fake-background').fadeIn(1000).fadeTo("slow", 0.8);
/Set the pop-up window to center
$("#response").css('top', $(window).height() / 2 - $("#response").height() / 2).css('left', $(window).width() / 2 - $("#response").width() / 2).fadeIn(2000);
/while tapping the close link
$('.real-background .close').click(function (e) {
/Cancel the link behaviour
e.preventDefault();
$('#fake-background').hide();
$('.real-background').hide();
});
/This will execute if user clicks outside pop-up
$('#fake-background').click(function () {
$(this).hide();
$('.real-background').hide();
});
});
And the final html is:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML Explorer</title>
<style type="text/css">
#module .real-background {
width:440px;
height:200px;
position:absolute;
z-index:9999;
padding:20px;
left:0;
top:0;
display:none;
}
#module #response {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
#fake-background {
z-index:9000;
background-color:#000;
display:none;
position:absolute;
left:0;
top:0;
}
a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}
body {
font-family:verdana;
font-size:15px;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
/Set height and width to fill the mask layer under the pop-up
$('#fake-background').css({
'width': $(window).width(),
'height': $(document).height()
});
/transition effect
$('#fake-background').fadeIn(1000).fadeTo("slow", 0.8);
/Set the pop-up window to center
$("#response").css('top', $(window).height() / 2 - $("#response").height() / 2).css('left', $(window).width() / 2 - $("#response").width() / 2).fadeIn(2000);
/while tapping the close link
$('.real-background .close').click(function (e) {
/Cancel the link behaviour
e.preventDefault();
$('#fake-background').hide();
$('.real-background').hide();
});
/This will execute if user clicks outside pop-up
$('#fake-background').click(function () {
$(this).hide();
$('.real-background').hide();
});
});
</script>
</head>
<body>
<h2><a href="http://www.htmlexplorer.com/">HTML Explorer: Demo - Popup on website startup</a></h2>
<div id="module">
<div style="top: 200px; left: 550px; display: none;" id="response" class="real-background">
HTML Explorer Demo Pop-up Window |
<a href="#" class="close">Close</a>
</div>
<!-- This element will display as an intermediate layer between the pop-up and the background. -->
<div style="width: 1500px; height: 599px; display: none; opacity: 0.7;" id="fake-background"></div>
</div>
</body>
</html>
0 comments:
Post a Comment