JavaScript彈出窗口僅顯示一次

Question

這是一個彈出淡入框的腳本，該框顯示用戶何時要離開網頁。

我試圖使其僅顯示一次，所以當用戶單擊“ X標記”退出時，我不想再次顯示它。 當前，無論單擊多少次退出，它始終顯示。

我們將不勝感激，因為我對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 the 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>

Answer 1

您可以只保留一個變量，作為是否打開了彈出窗口的標志。 頁面刷新時，它將設置回false。

$(document).ready(function() {
    var opened = false;
    $(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 && !opened)
        {
            opened = true;
            // Show the exit popup
            $('#exitpopup_bg').fadeIn();
            $('#exitpopup').fadeIn();   
        }
    });

    $('#xmark').click(function(){
        $('#exitpopup_bg').fadeOut();
        $('#exitpopup').slideUp();
    }); 

    });

Answer 2

您可以只添加一個計數器變量。 像這樣：

    $(document).ready(function() {
    var counter=0;
            ....
     if(counter ==0) {
        // Show the exit popup
        $('#exitpopup_bg').fadeIn();
        $('#exitpopup').fadeIn();   
        counter++;
      }
 } 
  });

Answer 3

在.slideup()的回調中使用.remove() .slideup() ：

$('#exitpopup').slideUp('fast', function(){
    $(this).remove();
});