Question

<script>
$(".image-popup").on('click', function() {
       $(this).find(".myModal").addClass("modal-active");
       $(".modal-active").css("display", "block");
   });
$(".close").on('click', function() {
       $(".modal-active").css("display", "none");
       var myVar = $(this).closest(".image-popup");
       myVar.find(".myModal").removeClass("modal-active");
       $(".modal-active").css("display","none");
   });
</script>

我试图让模态出现，然后在单击关闭按钮时消失。问题是removeClass（）不起作用，“display”，“none”不会覆盖第一个单击功能。任何帮助？

Answer 1

我的猜测从您的问题和上面的评论来看，您的第二个处理程序中的事件正在冒泡到您的第一个处理程序：

$(".image-popup").on('click', function() {
    $(this).find(".myModal")
        .addClass("modal-active")
        .show();
});

$(".close").on('click', function(evt) {
    evt.preventDefault();

    $(this).closest(".image-popup")
        .find(".myModal")
        .removeClass("modal-active");
        .hide();
});

尝试使用.close

阻止事件冒出evt.preventDefault();处理程序

Answer 2

您可以使用这个简单的解决方案来修复它：

<强> HTML

<div class="image-popup">
<div class="show-modal btn btn-success">Show Modal</div>
  <div class="myModal">
  <div class="close btn btn-success">Close</div>
  <p>My Modal is active</p>
  </div>
</div>

<强> CSS

.modal-active .myModal{
  display: block;
}
.myModal{
  display:none;
}
.close{
  color:red;
  display:block;
}

<强> JS

$(function(){
    $('.show-modal').click(function(){
    $(this).parent().addClass('modal-active');
  });
  $('.close').click(function(){
    $(this).closest('.image-popup').removeClass('modal-active');
  });
});

有关详细信息https://jsfiddle.net/a3yze54w/1/

，请参阅此小提琴

jQuery / Javascript在点击时添加/删除this.class

2 个答案: