Jquery is most popular JavaScript library in the world, most web developers used jquery in there development because it is easy for newbies, jquery have a lots function and effects like form validation, animation, image slider and popup div box.
A web developer or designer we can apply this jquery effects very easy in our web projects, we can search and download, using third party jQuery plugins.
In jquery popup effects, If your wonder on how to create a in your own hand, in this tutorial I would like to share on how to create a popup div effect using jQuery, html and css.
We create a jquery popup div like lightbox and fancybox manually in steps, a popups ‘on click trigger’ event that pop up displays with opacity background and will remains center the popup if you scrolling zoom out the browser and closing by fadeout event and Ecs keyboard event, And also you can add text, image and video in YouTube and customize the content on the popup div after integrate your website.
1. Creating the Page Template
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Website</title>
<link href="style/style.css" rel="stylesheet" type="text/css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"> </script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<a href="#" class="topopup">Click Here Trigger</a>
<div id="toPopup">
<div class="close"></div>
<span class="ecs_tooltip">Press Esc to close <span class="arrow"></span></span>
<div id="popup_content"> <!--your content start-->
Test content, Test content Test content Test content Test content Test content Test content
<a href="#" class="livebox">Click Here Trigger</a>
</div> <!--your content end-->
</div> <!--toPopup end-->
<div class="loader"></div>
<div id="backgroundPopup"></div>
</body>
</html>
In index.html, we include the css, jquery script and js script after the title tag; in the body we have 3 div containers for popup div event.
- div container for loading
- div container for popup background,
- and div container for popup
2. The stylesheet
style.css
#backgroundPopup {
z-index:1;
position: fixed;
display:none;
height:100%;
width:100%;
background:#000000;
top:0px;
left:0px;
}
#toPopup {
font-family: "lucida grande",tahoma,verdana,arial,sans-serif;
background: none repeat scroll 0 0 #FFFFFF;
border: 10px solid #ccc;
border-radius: 3px 3px 3px 3px;
color: #333333;
display: none;
font-size: 14px;
left: 50%;
margin-left: -410px;
position: fixed;
top: 20%;
width: 800px;
z-index: 2;
}
div.loader {
background: url("../img/loading.gif") no-repeat scroll 0 0 transparent;
height: 32px;
width: 32px;
display: none;
z-index: 9999;
top: 40%;
left: 50%;
position: absolute;
margin-left: -10px;
}
div.close {
background: url("../img/closebox.png") no-repeat scroll 0 0 transparent;
cursor: pointer;
height: 30px;
position: absolute;
right: -27px;
top: -24px;
width: 30px;
}
span.ecs_tooltip {
background: none repeat scroll 0 0 #000000;
border-radius: 2px 2px 2px 2px;
color: #FFFFFF;
display: none;
font-size: 11px;
height: 16px;
opacity: 0.7;
padding: 4px 3px 2px 5px;
position: absolute;
right: -62px;
text-align: center;
top: -51px;
width: 93px;
}
span.arrow {
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 7px solid #000000;
display: block;
height: 1px;
left: 40px;
position: relative;
top: 3px;
width: 1px;
}
div#popup_content {
margin: 4px 7px;
/* remove this comment if you want scroll bar
overflow-y:scroll;
height:200px
*/
}
In the css, if you want scrollbar in the popup just remove comment in line 74.
3. The jQuery script
script.js
jQuery(function($) {
$("a.topopup").click(function() {
loading(); // loading
setTimeout(function(){ // then show popup, deley in .5 second
loadPopup(); // function show popup
}, 500); // .5 second
return false;
});
/* event for close the popup */
$("div.close").hover(
function() {
$('span.ecs_tooltip').show();
},
function () {
$('span.ecs_tooltip').hide();
}
);
$("div.close").click(function() {
disablePopup(); // function close pop up
});
$(this).keyup(function(event) {
if (event.which == 27) { // 27 is 'Ecs' in the keyboard
disablePopup(); // function close pop up
}
});
$("div#backgroundPopup").click(function() {
disablePopup(); // function close pop up
});
$('a.livebox').click(function() {
alert('Hello World!');
return false;
});
/************** start: functions. **************/
function loading() {
$("div.loader").show();
}
function closeloading() {
$("div.loader").fadeOut('normal');
}
var popupStatus = 0; // set value
function loadPopup() {
if(popupStatus == 0) { // if value is 0, show popup
closeloading(); // fadeout loading
$("#toPopup").fadeIn(0500); // fadein popup div
$("#backgroundPopup").css("opacity", "0.7"); // css opacity, supports IE7, IE8
$("#backgroundPopup").fadeIn(0001);
popupStatus = 1; // and set value to 1
}
}
function disablePopup() {
if(popupStatus == 1) { // if value is 1, close popup
$("#toPopup").fadeOut("normal");
$("#backgroundPopup").fadeOut("normal");
popupStatus = 0; // and set value to 0
}
}
/************** end: functions. **************/
}); // jQuery End
In the click event we triggered the loading() function and delay 0.5 second and triggered the loadPopup() function and the pop up displays. We add little more for closing the popup, if hover the ‘Close’ the tool tip message will appeared and keyboard event for close.
Important Notes:
If you use this script for selling ex: themeforest.net, please don’t include a credit, You can use this script all you want. Happy Coding…
4. Done
We’re done, Congratulations you learn how to create a jquery popup div, on creating your own popup div you can edit the content of the popup like adding more text, image, registration form and add YouTube video.
Thank you for reading my tutorial. Please recommend and share.
Let’s have a look at what we’ve achieved:
- We create popup div without third party plugin
- Works in old IE browser, IE 7,8
- We add little feature, hover tool tip and keyboard event
