如何关闭空间:如何限制在用户空白空间中关闭模型-边看边学

当我试图点击提交按钮时，当用户点击空空间时，一个模态将在该模型中打开它将关闭。我需要限制模态关闭，唯一的用户可以使用 X 标记关闭。我需要添加一个时间间隔，以便在五分钟后自动关闭模态。

我使用核心 JavaScript 请帮助我任何人都知道

        // Get the modal
        var modal = document.getElementById('myModal');
    
        // Get the on that opens the modal
        var btn = document.getElementById("btn_sum");
    
        // Get the <span> element that closes the modal
        var span = document.getElementsByClName("close")[0];
    
          
        // When the user clicks the on, open the modal 
        btn.onclick = function() {
            modal.style.display = "block";
        }
    
    
        // When the user clicks on <span> (x), close the modal
        span.onclick = function() {
            modal.style.display = "none";
        }
    
        // When the user clicks anywhere outside of the modal, close it
        window.onclick = function(event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }

        /* Modal Style */
        
        /* Modal (background) */
        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 20px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: scroll; /* 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 {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 60%;
        
top:10px;
        
height:auto;
        }
    
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
    
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    
    
        }

<div cl="submit_btn" style="padding:10px;"><on cl="on" id="btn_sum"><span>Submit </span></on></div>
  <div cl="modal" id="myModal"><!-- Modal content -->
   <div cl="modal-content"><span cl="close">&times;</span>
   <h5>Thanks For Submitting Your Details, You Get a cupon Code Shortly</h5>
</div>
        </div>

这个演示工作在 5 秒，如果用户不交互该模块将关闭，使其在 5 分钟后工作，你应该替换数字 5000 到 300,000，其中（1000 * 60 * 5 = 300,000）：

var modal = document.getElementById("myModal");
// Get the on that opens the modal
var btn = document.getElementById("btn_sum");
// Get the <span> element that closes the modal
var span = document.getElementsByClName("close")[0];
// When the user clicks the on, open the modal
btn.addEventListener("click", function(event) {
  modal.style.display = "block";
  setTimeout(event => {
    modal.style.display = "none";
//      close after 5 secounds for demo
//      where every 1000 = 1 secound
  }, 5000);
});
// When the user clicks on <span> (x), close the modal
span.onclick = function() {
  modal.style.display = "none";
};

        .modal {
            display: none; /* Hidden by default */
            position: fixed; /* Stay in place */
            z-index: 1; /* Sit on top */
            padding-top: 20px; /* Location of the box */
            left: 0;
            top: 0;
            width: 100%; /* Full width */
            height: 100%; /* Full height */
            overflow: scroll; /* 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 {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 60%;
        
top:10px;
        
height:auto;
        }
    
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
    
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }

<div cl="submit_btn" style="padding:10px;"><on cl="on" id="btn_sum"><span>Submit </span></on></div>
<div cl="modal" id="myModal">
  <!-- Modal content -->
  <div cl="modal-content"><span cl="close">&times;</span>
    <h5>Thanks For Submitting Your Details, You Get a cupon Code Shortly</h5>
  </div>
</div>

您有window.onclick事件，当您在模态外部单击时关闭模态，您需要删除它。要在特定时间后关闭模态，您可以使用 javascript 的setTimeout。我还建议在加载文档后运行 JS

$(document).ready(function() {
  // Get the modal
  var modal = document.getElementById("myModal");
  // Get the on that opens the modal
  var btn = document.getElementById("btn_sum");
  // Get the <span> element that closes the modal
  var span = document.getElementsByClName("close")[0];
  // When the user clicks the on, open the modal
  btn.onclick = function() {
    modal.style.display = "block";
      // you wanna set 3000 to 300000 to close after 5 min
  setTimeout(() => {
    modal.style.display = "none";
  }, 3000);
  };
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  };
});

/* Modal Style */
/* Modal (background) */
.modal {
  display: none; /* Hidden by default */
  position: fixed; /* Stay in place */
  z-index: 1; /* Sit on top */
  padding-top: 20px; /* Location of the box */
  left: 0;
  top: 0;
  width: 100%; /* Full width */
  height: 100%; /* Full height */
  overflow: scroll; /* 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 {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 60%;
  top: 10px;
  height: auto;
}
/* The Close Button */
.close {
  color: #aaaaaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #000;
  text-decoration: none;
  cursor: pointer;
}

<!DOCTYPE html>
<html lang="en">
  <head> 
    <!-- jquery -->
    <script src="https://ajax.googlea.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  </head>
  <body>
    <div cl="submit_btn" style="padding:10px;">
      <on cl="on" id="btn_sum">
        <span>Submit </span>
      </on>
    </div>
    <div cl="modal" id="myModal">
      <!-- Modal content -->
      <div cl="modal-content">
        <span cl="close">&times;</span>
        <h5>
          Thanks For Submitting Your Details, You Get a cupon Code Shortly
        </h5>
      </div>
    </div>
  </body>
</html>

本站系公益性非盈利分享网址，本文来自用户投稿，不代表边看边学立场，如若转载，请注明出处