在 fadeOut() 之后，内容再次淡入

Question

我想制作一个简单的模态，当您单击类为 day 的 div 时，您将看到模态，当您单击类为 close 的文本时，它将关闭。

当我尝试这个时，模态会按预期淡入，但是当我单击关闭以淡出时，它会淡出然后再次淡入。

我尝试使用带不透明度的动画，隐藏/显示，但似乎没有任何解决问题的方法。

$(document).ready(function() {
  $('.layer').hide()

  $(document).on('click', '.day', function() {
    $('.layer').fadeIn()
    $(this).children('.modal').fadeIn()
  })

  $(document).on('click', '.close', function() {
    $('.layer').hide()
    $(this).parent().parent('.modal').fadeOut()
  })
})

#days {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.day {
  background-color: white;
  width: 130px;
  height: 130px;
  padding: 20px;
  border-radius: 20px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;
  border: 5px solid white;
  box-shadow: 0px 0px 21px 0px rgba(255, 255, 255, 0.5);
  background-color: lightgray;
}

.day:hover {
  cursor: pointer;
}

.layer {
  opacity: 0.5;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden!important;
}

.modal {
  display: none;
  position: fixed;
  padding: 50px;
  padding-top: 20px;
  width: 50%;
  min-height: 65%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  background-color: white;
  font-family: "Helvetica";
}

.modal-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.close {
  text-align: right;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layer"></div>
<div id="days">
  <div class="day">
    <h2>1</h2>
    <div class="modal">
      <div class="modal-top">
        <h3>1. modal</h3>
        <p class="close">x</p>
      </div>
    </div>
  </div>
  <div class="day">
    <h2>2</h2>
    <div class="modal">
      <div class="modal-top">
        <h3>2. modal</h3>
        <p class="close">x</p>
      </div>
    </div>
  </div>
</div>

Answer 1

这可能是由于事件冒泡而发生的。当您单击 close 时，它​​是具有类 day 的元素的子元素，您同时单击具有类 close 和 day 的元素。因此它首先关闭然后重新打开。您可以使用事件。 stopPropagation() 停止事件冒泡去像这样的类日元素

    $(document).on('click', '.close', function(event){
      $('.layer').hide()
      $(this).parent().parent('.modal').fadeOut()
      event.stopPropagation()
    })

Answer 2

使用 event.stopPropagation();这会工作

$(document).ready(function() {
  $('.layer').hide()

  $(document).on('click', '.day', function() {
    $('.layer').fadeIn()
    $(this).children('.modal').fadeIn()
  })

  $(document).on('click', '.close', function(event) {
    $('.layer').hide()
    $(this).parent().parent('.modal').fadeOut()
    //return false;
    event.stopPropagation();
  })
})

#days {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
}

.day {
  background-color: white;
  width: 130px;
  height: 130px;
  padding: 20px;
  border-radius: 20px;
  margin-right: 10px;
  margin-left: 10px;
  margin-bottom: 20px;
  border: 5px solid white;
  box-shadow: 0px 0px 21px 0px rgba(255, 255, 255, 0.5);
  background-color: lightgray;
}

.day:hover {
  cursor: pointer;
}

.layer {
  opacity: 0.5;
  background-color: black;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  min-height: 100vh;
  overflow: hidden!important;
}

.modal {
  display: none;
  position: fixed;
  padding: 50px;
  padding-top: 20px;
  width: 50%;
  min-height: 65%;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 20px;
  background-color: white;
  font-family: "Helvetica";
}

.modal-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

.close {
  text-align: right;
  cursor: pointer;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="layer"></div>
<div id="days">
  <div class="day">
    <h2>1</h2>
    <div class="modal">
      <div class="modal-top">
        <h3>1. modal</h3>
        <p class="close">x</p>
      </div>
    </div>
  </div>
  <div class="day">
    <h2>2</h2>
    <div class="modal">
      <div class="modal-top">
        <h3>2. modal</h3>
        <p class="close">x</p>
      </div>
    </div>
  </div>
</div>