Question

Actualy我的弹出窗口一次又一次地出现。每次用户将鼠标移出屏幕时。

我需要弹出窗口只出现一次，如果用户关闭它，弹出窗口不会再回来。

我需要重新加载页面。我的关闭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>

Answer 1

对于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/

Js限制了一个带弹出窗口的动作

1 个答案: