Question

我是Web开发的新手，我在使用倍数模态时遇到一些问题：

如何：在模式打开时防止背景滚动。
操作方法：按esc键时关闭模态。
操作方法：关闭并重新打开相同的模式时，样式应恢复正常，而无需刷新页面。我没有使用jQuery或Bootstrap模式。.

这是我正在使用的javascript代码：

var btn1 = document.getElementById("myBtncourse1");
var btn2 = document.getElementById("myBtncourse2");
var btn3 = document.getElementById("myBtncourse3");
var btn4 = document.getElementById("myBtncourse4");
var btn5 = document.getElementById("myBtncourse5");
var btn6 = document.getElementById("myBtncourse6");

var modal1 = document.getElementById('myModalcourse1');
var modal2 = document.getElementById('myModalcourse2');
var modal3 = document.getElementById('myModalcourse3');
var modal4 = document.getElementById('myModalcourse4');
var modal5 = document.getElementById('myModalcourse5');
var modal6 = document.getElementById('myModalcourse6');

btn1.onclick = function() {
modal1.style.display = "block";}
btn2.onclick = function() {
modal2.style.display = "block";}
btn3.onclick = function() {
modal3.style.display = "block";}
btn4.onclick = function() {
modal4.style.display = "block";}
btn5.onclick = function() {
modal5.style.display = "block";}
btn6.onclick = function() {
modal6.style.display = "block";}

var button1 = document.getElementById("close1");
button1.onclick = function() {
modal1.style.display = "none";}

var button2 = document.getElementById("close2");
button2.onclick = function() {
modal2.style.display = "none";}

var button3 = document.getElementById("close3");
button3.onclick = function() {
modal3.style.display = "none";}

var button4 = document.getElementById("close4");
button4.onclick = function() {
modal4.style.display = "none";}

var button5 = document.getElementById("close5");
button5.onclick = function() {
modal5.style.display = "none";}

var button6 = document.getElementById("close6");
button6.onclick = function() {
modal6.style.display = "none";}

window.onclick = function(event) {
if (event.target == modal1) {
    modal1.style.display = "none";}

if (event.target == modal2) {
    modal2.style.display = "none";}

if (event.target == modal3) {
    modal3.style.display = "none";}

if (event.target == modal4) {
    modal4.style.display = "none";}

if (event.target == modal5) {
    modal5.style.display = "none";}

if (event.target == modal6) {
    modal6.style.display = "none";} }

Answer 1

我建议您只使用引导程序4模态

<head>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<!-- Popper JS -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>

<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal
</button>

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

Answer 2

对于问题2，您可以尝试使用纯Javascript进行类似的操作

document.addEventListener('keydown', function(event) {
    const key = event.key;
    if (key === "Escape") {
        // Do something
    }
});

要解决您的第一个和第三个问题，使用Bootstrap框架会更有效。您可以通过调整许多预定义的事件和样式来解决问题。

对于模型，您可以按类（getElementsByClassName）而不是id（getElementById）来定位模态，因为您的案例中有多个模型。

希望这会对您有所帮助：）

模态3主要问题

2 个答案: