简体   繁体   中英

How to set popup on page load first time only?

How to set a popup window that open when first time the page load? im using this code for my popup how to set session for this popup? is there any way to use ip as session?

    <script>
        !window.jQuery && document.write('<script src="fancybox/jquery-1.4.3.min.js"><\/script>');
    </script>

    <script type="text/javascript" src="fancybox/jquery.fancybox-1.3.4.pack.js"></script>   

    <script type="text/javascript">

    $(document).ready(function() {


        $("a#example1").fancybox();

        $("a#example1").trigger('click');


    });
    </script>


    <link rel="stylesheet" type="text/css" href="fancybox/jquery.fancybox-1.3.4.css" media="screen" />


</head>



<body>

<a id="example1" href="images/pic.jpg"></a> 



</body>

Check for a cookie, and if not there, do the popup and set the cookie for next time; if the cookie is there, don't do the popup. Quirksmode has some functions for making cookies easier, or of course there's the jQuery cookie plugin (and probably about 50 others).

you can use jquery-cookie

Demo :

$(document).ready(function() {
       if($.cookie('popup') != 1){
           $.cookie('popup', '1');
           $("a#example1").fancybox();
           $("a#example1").trigger('click');
        }
    });

Using sessions for this would be an unnecessary load on your server. Use cookies instead, that helps to store data in the user's computer.

Use Javascript/your server language to check the cookie and show the popup based on its value!

You can you Cookies or localStorage Using Cookies:

$(document).ready(function() {
var loadfirst = getCookie("loadfirsttime");
if(loadfirst == null){
setCookie("loadfirst", "again" 1); // 1 is the number of days
$("a#example1").fancybox();
 $("a#example1").trigger('click');
}
});

Using LocalStorage:

$(document).ready(function() {
 var loadfirst = localStorage.getItem("loadfirsttime");
if(loadfirst == null){
localStorage.setItem('loadfirst ', 1); // 1 is value assigned.
$("a#example1").fancybox();
 $("a#example1").trigger('click');
}
});

Thanks

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM