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 disabled if(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 enabled if(popupStatus==1){ $("#backgroundPopup").fadeOut("slow"); $("#popupContact").fadeOut("slow"); popupStatus = 0; }}//centering popupfunction centerPopup(){ //request data for centering var 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 popup setTimeout("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 .
No comments:
Post a Comment