如何限制模型在用户空白处单击的时间

问题描述 投票:0回答:1

[当尝试单击提交按钮时,当用户单击空白空间时,一个模式将在该模型中打开,它将关闭。我需要限制模式关闭,唯一的用户可以使用X标记关闭。而且我需要添加一个时间间隔以在五分钟后自动关闭模式。

正在使用核心javascript,请帮助我,任何人都知道

        // Get the modal
        var modal = document.getElementById('myModal');
    
        // Get the button that opens the modal
        var btn = document.getElementById("btn_sum");
    
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
    
          
        // When the user clicks the button, 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 class="submit_btn" style="padding:10px;"><button class="button" id="btn_sum"><span>Submit </span></button></div>
  <div class="modal" id="myModal"><!-- Modal content -->
   <div class="modal-content"><span class="close">&times;</span>
   <h5>Thanks For Submitting Your Details, You Get a cupon Code Shortly</h5>
</div>
        </div>
javascript css
1个回答
1
投票

您有window.onclick事件,当您在模态之外单击时会关闭模态,您希望将其删除。要在特定时间后关闭模态,您可以使用javascript setTimeout。我也建议您运行JS文件加载后

$(document).ready(function() {
  // Get the modal
  var modal = document.getElementById("myModal");

  // Get the button that opens the modal
  var btn = document.getElementById("btn_sum");

  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];

  // When the user clicks the button, 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";
  };
  // you wanna set 3000 to 300000 to close after 5 min
  setTimeout(() => {
    modal.style.display = "none";
  }, 3000);
});
/* 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.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  </head>
  <body>
    <div class="submit_btn" style="padding:10px;">
      <button class="button" id="btn_sum">
        <span>Submit </span>
      </button>
    </div>
    <div class="modal" id="myModal">
      <!-- Modal content -->
      <div class="modal-content">
        <span class="close">&times;</span>
        <h5>
          Thanks For Submitting Your Details, You Get a cupon Code Shortly
        </h5>
      </div>
    </div>
  </body>
</html>

0
投票

var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("btn_sum");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks the button, 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 class="submit_btn" style="padding:10px;"><button class="button" id="btn_sum"><span>Submit </span></button></div>
<div class="modal" id="myModal">
  <!-- Modal content -->
  <div class="modal-content"><span class="close">&times;</span>
    <h5>Thanks For Submitting Your Details, You Get a cupon Code Shortly</h5>
  </div>
</div>
© www.soinside.com 2019 - 2024. All rights reserved.