Question

我具有以下脚本，用于使用jQuery打开弹出框。我希望网站上有几种可能性可以打开在我单击任意位置（弹出窗口本身除外）时关闭的弹出窗口，包括“打开按钮”。

两个问题：

当我删除“ .js-open-modal”类时，该脚本不再起作用，因为您无法再打开弹出窗口。要通过单击任意位置（弹出窗口本身除外）来关闭弹出窗口，我该怎么办？
具有多个弹出窗口且没有太多复杂性的最佳方法是什么。当然，我可以添加几个

$(".modal2").addClass("visible");
$(".modal3").addClass("visible");

但是最好有几个a href=#链接并使用一些“数据”数组打开不同的弹出窗口？

<a href="#" class="js-open-modal">open modal</a>

<div class="modal">
    hey there, I'm the modal
</div>


.modal {
  display: none;
  position:fixed;
  top: 50%;
  left: 50%;
  transform:translate(-50%,-50%);
  background: #fff;
  width: 320px;
  height: 320px;
  text-align: center;
  box-sizing:border-box;
  box-shadow:0 0 20px rgba(0,0,0,.2);
  
  &.visible {
    display: block;
  }
}

.modal__header {
  color:white;
  background: #333;
  line-height: 50px;
  text-align: center;
  position: relative;
  height:50px;
  box-sizing:border-box;
}

$(".js-open-modal").click(function(){
  $(".modal").addClass("visible");
});

$(".js-close-modal").click(function(){
  $(".modal").removeClass("visible");
});

$(document).click(function(event) {
  if (!$(event.target).closest(".modal,.js-open-modal").length) {
    $("body").find(".modal").removeClass("visible");
  }
});

单击任意位置时关闭的几个jQuery弹出窗口

0 个答案: