jquery - JavaScript popup to show only once -
this script popup fade in box shows when user wants leave webpage.
i trying make show once, when user clicks "x mark" exit, don't want show again. show always, no matter how many times have click exit.
would appreciate help, have limited knowledge in javascript.
javascript
$(document).ready(function() { $(document).mousemove(function(e) { $('#exitpopup').css('left', (window.innerwidth/2 - $('#exitpopup').width()/2)); $('#exitpopup').css('top', (window.innerheight/2 - $('#exitpopup').height()/2)); if(e.clienty <= 30) { // show exit popup $('#exitpopup_bg').fadein(); $('#exitpopup').fadein(); } }); $('#xmark').click(function(){ $('#exitpopup_bg').fadeout(); $('#exitpopup').slideup(); }); });
.css
#exitpopup { text-align:center; font-family:arial, helvetica, sans-serif; } #exitpopup h1 { margin-top:0px; padding-top:0px; font-size:55px; } #exitpopup h2 { margin-top:0px; padding-top:0px; font-size:35px; text-transform:uppercase; color: #ff5300; font-weight:bold; font-style:italic; } #exitpopup p { text-align:left; } .button-popup { background-color: #ff5300; padding:40px; color:#fff; border:0px; font-size:26px; font-weight:bold; } .input-popup { border: 5px solid white; -webkit-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); -moz-box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.1), 0 0 16px rgba(0, 0, 0, 0.1); padding: 15px; background: #ffe2c6; margin: 0 0 10px 0; font-weight: bold; font-size:16px; } #xmark { position:absolute; margin-left:-20px; margin-top:-40px; }
html
<div style="display: none; width:100%; height:100%; position:fixed; background:#000000; opacity: .9; filter:alpha(opacity=0.8); z-index:999998; margin-top:-15px;" id="exitpopup_bg"></div> <div style=" margin-left: -20px; width:1000px; height:550px; display:none; position:fixed; color:#000; padding:40px 20px 20px 20px; z- index:999999; background:rgb(20, 20, 20); background: #f7f7f7; " id="exitpopup"> <div id="xmark"><img src="../slike/x-mark.png" /></div> </div>
you add counter variable. this:
$(document).ready(function() { var counter=0; .... if(counter ==0) { // show exit popup $('#exitpopup_bg').fadein(); $('#exitpopup').fadein(); counter++; } } });
Comments
Post a Comment