Showing posts with label Jquery Popup Not Display If Use Visit Site. Show all posts
Showing posts with label Jquery Popup Not Display If Use Visit Site. Show all posts

Sunday 30 August 2015

Jquery Popup Not Display If Use Visit Site

Hello

Here Example Of how to create simple popup using jquery. but new things that if you have to add
functionality if user visited site  then not display popup. if user in site then i can be see popup.

For this simple example how to create popup with jquery and if have to add functionality to only one
time see the popup and it will display after some time. here 5 second time out session.

Please check Below Code.

<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
<script type="text/javascript">
function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
}

$(document).ready(function(){
   
   
     var popup = getCookie("newpopup");
     alert(popup);
   
    if(popup == null || popup == undefined || popup == ""){
     setTimeout(function () {
           
          $.cookie('newpopup',"true");
            $(".popup").show();
          }, 5000);
    }else{
        $(".popup").hide();
    }
    $(".close_button").click(function(){
        $(".popup").hide();
    });
   
   
});

</script>
<style>
.popup {
    background: rgba(0, 0, 0, 0.5) none repeat scroll 0 0;
    height: 100%;
    position: fixed;
    text-align: center;
    width: 100%;
    z-index: 99999999;
}
</style>

<div>
<div class="popup" style="display: none;">

    <div class="popupbox">
    <div class="close_button"><a href="javascript:void(0)">Close</a></div>
<h1>This is our popup</h1>
<ul>
<li><a href="https://twitter.com/" >twitter</a></li>
<li><a href="https://www.facebook.com/" >twitter</a></li>
<li><a href="https://in.pinterest.com/" >facebook</a></li>
<li><a href="https://instagram.com/">instagram</a></li>
</ul>
</div>
</div>
</div>