主页 / 问题 / 924316
Accepted
Nice
Asked:2020-12-23 11:58:44 +0000 UTC2020-12-23 11:58:44 +0000 UTC

消失的模态窗口

  • 772

我不明白为什么当您单击窗口本身时模态窗口会消失，尽管我写道只有当您单击覆盖时它才会消失。注册了一个窗口和 z-index 大，没有帮助。

$("button").click(function() {
  $(".main").addClass("show");
});
$(".main").click(function() {
  $(this).removeClass("show");
});
body {
  z-index: 1;
}

.main {
  opacity: 0;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: #c2c2c2;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: -1;
  transition: .3s;
  .modal {
    width: 300px;
    height: 200px;
    background: #fff;
    z-index: 1000;
  }
}

button {
  z-index: 10;
}

.show {
  opacity: 1;
  z-index: 50;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>
<body>
  <button>Нажми!</button>
  <div class="main">
    <div class="modal"></div>
  </div>
</body>
</html>

在问题中，模态窗口本身不再出现，但在浏览器中可见......

html

1 个回答

  1. Best Answer

    click里面的事件.modal冒泡到.main.

    $(".main").click(function(e) {
  if (e.target == this)
    $(this).removeClass("show");
});

    或者

    $(".main").click(function(e) {
  if (!$(e.target).hasClass(".modal") && !$(e.target).parents(".modal").length)
    $(this).removeClass("show");
});

    或者

    $(".modal").click(function(e) {
  e.stopPrpagation();
});
    • 2

相关问题