query popup is the most popular and cool jquery effects for websites, as a web developer or designer we can apply this cool jquery effects very easy in our projects, we can search and download, using third party jQuery plugins. If your wonder on how to create a popup div in your own hand. In this tutorial I would like to share on how to create a pop up div effect using the popular jQuery library.
In this jquery example we create a popup div in ‘on click trigger’ event, that pop up displays with opacity background and it will remains center the popup if you scrolling zoom out the browser and closing it fadeout, and also you can customize the content of the popup div for your cool website designs. Let’s begin.
1. Creating the Page Template
index.html
<html> <head> <title>Creating Popup Div | istockphp.com</title> <link href="style/style.css" media="all" rel="stylesheet" type="text/css"></link> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js" type="text/javascript"> </script> <script src="js/script.js" type="text/javascript"></script> </head> <body> <a class="topopup" href="https://www.blogger.com/blogger.g?blogID=8372155484201729683#">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--> <p>Use a appropriate pen (e.g. a black permanent marker of fine or medium thickness) to make your handwriting look great! Confirm that your characters fit into your designated cells.<p><br/> <p>The characters which you present on the template are only added to the font, so work out before writing down. If you don't want to highlight any character, you can skip page 2 of template.<p><div align="center"> <a class="livebox" href="https://www.blogger.com/blogger.g?blogID=8372155484201729683#">Click Here Trigger</a></div> </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: -402px;
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.
4.Done
We’re done, we learn one of jquery example on creating our own popup div using jQuery, and you can edit the content of the popup like adding more text, registration form and image. 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
0 comments:
Post a Comment