In comments of my previous post "Using Jquery to make an one-time subscription pop-up" ,YellOblog said that he want the pop-up appear after an amount of time and the pop-up is always at the center of viewport .Thanks YellOblog for the suggestion . Here is the complete code for your request
Live Demo
To make a Subscription Pop-up ,you can read my post "Using Jquery to make an one-time subscription pop-up" and follow steps from 1 to 3 .
For the step 4 - Jquery code ,replace the code in the post "Using Jquery to make an one-time subscription pop-up"
with this one
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script><script src="http://dinhquanghuy.110mb.com/jquery.cookie.js" type="text/javascript"></script><script type="text/javascript">var popupStatus = 0;//loading popup with jQuery magic!function loadPopup(){centerPopup();//loads popup only if it is disabledif(popupStatus==0){$("#backgroundPopup").css({"opacity": "0.7"});$("#backgroundPopup").fadeIn("slow");$("#popupContact").fadeIn("slow");popupStatus = 1;}}//disabling popup with jQuery magic!function disablePopup(){//disables popup only if it is enabledif(popupStatus==1){$("#backgroundPopup").fadeOut("slow");$("#popupContact").fadeOut("slow");popupStatus = 0;}}//centering popupfunction centerPopup(){//request data for centeringvar windowWidth = document.documentElement.clientWidth;var windowHeight = document.documentElement.clientHeight;var windowscrolltop = document.documentElement.scrollTop;var windowscrollleft = document.documentElement.scrollLeft;var popupHeight = $("#popupContact").height();var popupWidth = $("#popupContact").width();var toppos = windowHeight/2-popupHeight/2+windowscrolltop;var leftpos = windowWidth/2-popupWidth/2+windowscrollleft;//centering$("#popupContact").css({"position": "absolute","top": toppos,"left": leftpos});//only need force for IE6$("#backgroundPopup").css({"height": windowHeight});}//CONTROLLING EVENTS IN jQuery$(document).ready(function(){if ($.cookie("anewsletter") != 1) {//load popupsetTimeout("loadPopup()",5000);}//CLOSING POPUP//Click the x event!$("#popupContactClose").click(function(){disablePopup();$.cookie("anewsletter", "1", { expires: 7 });});//Click out event!$("#backgroundPopup").click(function(){disablePopup();$.cookie("anewsletter", "1", { expires: 7 });});//Press Escape event!$(document).keypress(function(e){if(e.keyCode==27 && popupStatus==1){disablePopup();$.cookie("anewsletter", "1", { expires: 7 });}});});</script>
pay attention to this line setTimeout("loadPopup()",5000);
5000 is the delay time in millisecond . You can set another value if you want .
That's all . I hope this update can fill your requests and make the subscription pop-up more profesional. You can check it out yourself and see the result .
0 comments:
Post a Comment