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="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 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;
    //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 .
By The Simplexdesign


Responses

0 Respones to "UPDATE FOR SUBSCRIPTION POP-UP"

 

Followers

Links

Blog Promotion, Promote Your Blog
Submit Blog, Blog Directory Submission
Bloggers - Meet Millions of Bloggers Web Design Blogs
blog directory
Online Marketing
Return to top of page Copyright © 2010 | Platinum Theme Converted into Blogger Template by HackTutors