Js limitter сразу действие со всплывающим окном

Фактически мое всплывающее окно появляется снова и снова. Каждый раз, когда пользователь вытаскивает свою мышь из экрана.Js limitter сразу действие со всплывающим окном

Мне нужно, чтобы мое всплывающее окно отображалось только один раз, если пользователь закрыл его, всплывающее окно не возвращается.

Мне нужно, чтобы без перезагрузки страницы. Мой близкий div тоже не работает.

Вы можете быстро протестировать его в html-файле.

<!DOCTYPE html> 
<html lang="en"> 
    <head> 
    <meta charset="UTF-8"> 
    <title>Title</title> 
    <style type="text/css"> 
     .modal { 
     display: none; /* Hidden by default */ 
     position: fixed; /* Stay in place */ 
     z-index: 1; /* Sit on top */ 
     padding-top: 100px; /* Location of the box */ 
     left: 0; 
     top: 0; 
     width: 100%; /* Full width */ 
     height: 100%; /* Full height */ 
     overflow: auto; /* Enable scroll if needed */ 
     background-color: rgb(0,0,0); /* Fallback color */ 
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */ 
     } 

     /* Modal Content */ 
     .modal-content { 
     position: relative; 
     background-color: #fefefe; 
     margin: auto; 
     padding: 0; 
     border: 1px solid #888; 
     width: 80%; 
     box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19); 
     -webkit-animation-name: animatetop; 
     -webkit-animation-duration: 0.4s; 
     animation-name: animatetop; 
     animation-duration: 0.4s 
     } 

     /* Add Animation */ 
     @-webkit-keyframes animatetop { 
     from {top:-300px; opacity:0} 
     to {top:0; opacity:1} 
     } 

     @keyframes animatetop { 
     from {top:-300px; opacity:0} 
     to {top:0; opacity:1} 
     } 

     /* The Close Button */ 
     .close { 
     color: white; 
     float: right; 
     font-size: 28px; 
     font-weight: bold; 
     } 

     .close:hover, 
     .close:focus { 
     color: #000; 
     text-decoration: none; 
     cursor: pointer; 
     } 

     .modal-header { 
     padding: 2px 16px; 
     background-color: #5cb85c; 
     color: white; 
     } 

     .modal-body {padding: 2px 16px;} 

     .modal-footer { 
     padding: 2px 16px; 
     background-color: #5cb85c; 
     color: white; 
     } 
    </style> 
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> 

    </head> 
    <body> 

    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 


    <div id="myModal" class="modal"> 

     <!-- Modal content --> 
     <div class="modal-content"> 
     <div class="close">X</div> 
     <div class="modal-header"> 
      <h2 class="center-pop-up">Laissez nous une note.</h2> 
     </div> 
     <div class="modal-body"> 
      <form method="post" id="add_comment"> 
      <input type="text" value="" name="page"> 
      <input type="text" value="" name="page" id="id_comment"> 
      </form> 

     </div> 
     <div class="modal-footer"> 
      <h3 class="center-pop-up">Merci de votre passage sur notre site!</h3> 
     </div> 
     </div> 

    </div> 
    <script type="text/javascript"> 
     // Get the modal 
     var modal = document.getElementById('myModal'); 

     // Get the <span> element that closes the modal 
     var body = document.body 
     var close = document.getElementsByClassName("close"); 
     var oneuponceatime = true; 
     var comment = document.getElementById("id_comment"); 

     comment.style.display = "none"; 

     close.onclick = function() { 
     modal.style.display = "none"; 
     } 

     console.log('body', body); 
     console.log('close', close); 


     if (oneuponceatime) { 
     body.onmouseleave = function(){ 
      modal.style.display = "block"; 
     } 
     oneuponceatime = false; 
     console.log(oneuponceatime); 
     } 
     else{ 
     console.log("coucou"); 
     } 



     // When the user clicks anywhere outside of the modal, close it 
     window.onclick = function(event) { 
     if (event.target == modal) { 
      modal.style.display = "none"; 
     } 
     } 
    </script> 


    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 


    <div> coucou les enfants</div> 
    <h1> JE SUIS UN LAPIN NINJA!!!!</h1> 

    </body> 
</html>

источник

2016-09-01 baptiste chéné

Для обработчика OnClick, вы должны разыменовать элемент массива

var close = document.getElementsByClassName("close")[0];

Для модальных снова появляющейся, вам нужно сбросить обработчик body.onmouseleave всякий раз, когда вы хотите, чтобы не вызвать. Как это:

function closeModal() { 
    modal.style.display = "none"; 
    body.onmouseleave = null; 
} 

close.onclick = closeModal; 

// ... 
// When the user clicks anywhere outside of the modal, close it 
window.onclick = function(event) { 
    if (event.target == modal) { 
     closeModal(); 
    } 
}

Попробуйте: https://jsfiddle.net/bz5b0z04/1/

источник

2016-09-01 15:34:19 patstuart

Js limitter сразу действие со всплывающим окном

ответ

Смежные вопросы