Sunday, March 13, 2011

Update for Subscription pop-up

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="" type="text/javascript"></script>  
<script src="" type="text/javascript"></script>
<script type="text/javascript">
         var popupStatus = 0;

//loading popup with jQuery magic!
function loadPopup(){
    //loads popup only if it is disabled
            "opacity": "0.7"
        popupStatus = 1;

//disabling popup with jQuery magic!
function disablePopup(){
    //disables popup only if it is enabled
        popupStatus = 0;

//centering popup
function 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;
        "position": "absolute",
        "top": toppos,
        "left": leftpos
    //only need force for IE6
        "height": windowHeight

    if ($.cookie("anewsletter") != 1) {   
        //load popup
    //Click the x event!
        $.cookie("anewsletter", "1", { expires: 7 });
    //Click out event!
        $.cookie("anewsletter", "1", { expires: 7 });
    //Press Escape event!
        if(e.keyCode==27 && popupStatus==1){
            $.cookie("anewsletter", "1", { expires: 7 });


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