javascript - how to stop pop up to appear when the page loads for the second time? -
html page:
<!doctype html> <html> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>simple jquery modal window queness</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> <script type="text/javascript"> $(document).ready(function() { var id = '#dialog'; //get screen height , width var maskheight = $(document).height(); var maskwidth = $(window).width(); //set heigth , width mask fill whole screen $('#mask').css({'width':maskwidth,'height':maskheight}); //transition effect $('#mask').fadein(1000); $('#mask').fadeto("slow",0.8); //get window height , width var winh = $(window).height(); var winw = $(window).width(); //set popup window center $(id).css('top', winh/2-$(id).height()/2); $(id).css('left', winw/2-$(id).width()/2); //transition effect $(id).fadein(2000); //if close button clicked $('.window .close').click(function (e) { //cancel link behavior e.preventdefault(); $('#mask').hide(); $('.window').hide(); }); //if mask clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); </script> <style type="text/css"> body { font-family:verdana; font-size:15px; } {color:#333; text-decoration:none} a:hover {color:#ccc; text-decoration:none} #mask { position:absolute; left:0; top:0; z-index:9000; background-color:#000; display:none; } #boxes .window { position:absolute; left:0; top:0; width:440px; height:200px; display:none; z-index:9999; padding:20px; } #boxes #dialog { width:375px; height:203px; padding:10px; background-color:#ffffff; } </style> </head><body> <div style="font-size: 10px; color: #000;">except otherwise noted, content on site licensed under creative commons attribution 3.0 license.</div> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window"> <a href="#" class="close">close it</a> </div> <!-- mask cover whole screen --> <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> </body> </html> hi above code in pop appears whenever page loads.but want pop must appear first time 1 user when refresh or loads page.is possible??
you should use cookie or local storage because lifetime of javascript ends when refresh page.
$(document).ready(function() { var firsttime = localstorage.getitem("firsttime"); if(! firsttime){ // current code localstorage.setitem("firsttime", true); } }); 
Comments
Post a Comment