Блог

Главная - Вопросы по программированию - Всплывающее окно JavaScript для отображения только один раз

Всплывающее окно JavaScript для отображения только один раз

#javascript #jquery #html

#javascript #jquery ( jquery ) #HTML

Вопрос:

это скрипт для всплывающего окна, которое показывает, когда пользователь хочет покинуть веб-страницу.

Я пытаюсь сделать так, чтобы он отображался только один раз, поэтому, когда пользователь нажимает «X mark» для выхода, я не хочу показывать его снова. В настоящее время он отображается всегда, независимо от того, сколько раз вы нажмете для выхода.

Был бы признателен за любую помощь, так как у меня очень ограниченные знания в 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>

Комментарии:

1. Когда вы говорите, что «не хотите показывать его снова», вы имеете в виду, что не показываете его, а сбрасываете при обновлении страницы (чтобы обновленная страница снова показывала его), или не показывайте его снова и снова?

2. сброс при обновлении страницы

Ответ №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 amp;amp; !opened)
        {
            opened = true;
            // Show the exit popup
            $('#exitpopup_bg').fadeIn();
            $('#exitpopup').fadeIn();   
        }
    });

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

    });

Ответ №2:

Вы могли бы просто добавить переменную счетчика. Что — то вроде этого:

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

Комментарии:

1. counter инициализируется значением 0, поэтому оно никогда не будет меньше 0. Это никогда не откроется. Должно быть counter == 0 .

2. Проблема в том, что окно должно отображаться только тогда, когда пользовательская мышь покидает документ вверху (когда пользователь хочет выйти со страницы). Это может занять несколько минут, пока пользователь не решит уйти. Вы можете увидеть скрипт в действии здесь: brzedijete.com/test/rezultatiFU.php

3. На этом я просто отредактировал / добавил if(counter ==0 amp;amp; e.clientY <= 30), и это работает так, как я хотел 🙂 Спасибо

Ответ №3:

использование .remove() в обратном вызове .slideup() :

 $('#exitpopup').slideUp('fast', function(){
    $(this).remove();
});
Метки: