在同一页面上具有相同元素名称的多个模式

Question

我正在努力做到这一点，当用户在模式之外点击时，它会关闭它。到目前为止，它只适用于第一个模态，而不是第二个。

这是我的代码：

$(window).click(function(e){
    $('.reportModal').each(function(){
        var modal = $(this);
        if (e.target == modal) {
            $('.reportModal').fadeOut();
        }
    });
    //if (e.target == $('.reportModal')[0] || e.target == ) {
    //    $('.reportModal').fadeOut();
    //}
});

我想让它对所有人都有效。任何帮助表示赞赏。谢谢。

Answer 1

当用户在模态框外点击时，它会关闭它。

所以...这也可以这样解释：

   如果用户点击的元素没有具有模态类的父元素...

现在您可以单击打开模态，在 :visible" 条件下应该“延迟”一点。

这是一个快速制作的演示：

$("button.open").on("click", function() {
  let modal = $("." + $(this).data("target"))
  setTimeout(function() {
    modal.fadeIn();
  }, 200)
})


$(document).on("click", function(e) {

  if ($(".reportModal").is(":visible") && $(e.target).closest(".reportModal").length === 0) {
    $(".reportModal").fadeOut(); // Whichever the opened one is... Close them all!
  }
});

.reportModal {
  display: none;
  position: fixed;
  top: 30%;
  left: 45%;
  border: 1px solid grey;
  border-radius: 30px;
  padding: 2em;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="reportModal one">
  <div>My custom modal #1</div>
</div>
<button class="open" data-target="one">open modal #1</button>

<div class="reportModal two">
  <div>My custom modal #2</div>
</div>
<button class="open" data-target="two">open modal #2</button>

Answer 2

由于它只有两个模态，我决定通过它的数组位置来抓取元素：

$(window).click(function(e){
    if (e.target == $('.reportModal')[0] || e.target == $('.reportModal')[1]) {
        $('.reportModal').fadeOut();
    }
});