Question

我在html文件中创建了一个模态。我通过单击按钮打开它然后执行方法

此js方法如下：

  openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";
  }

它有效。现在我想要做的是点击我的网站正文关闭它，所以我添加了3行：

openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";

    $(document).on('click', 'body *', function () {
      modal.style.display = "none";
    });
  }

问题似乎是我的鼠标上的一次点击不止一次到计算机，所以它总是执行：

modal.style.display = "block";

然后用同样的点击他也点击了：

    $(document).on('click', 'body *', function () {
      modal.style.display = "none";
    });

并执行它`

我还创建了一个监听器：

openModal() {
    var modal = document.getElementById('myModal');
    modal.style.display = "block";
    modal.addEventListener('click', function () {
      $(document).on('click', 'body *', function () {
        modal.style.display = "none";
      });
    });
  }

并且它第一次工作但是在关闭它之后，监听器继续工作，所以我不能做任何事情（它总是执行监听器行）

更新我也试过了：

  openModal() {
console.log("OpenModal")
var modal = document.getElementById('myModal');
modal.style.display = "block";
modal.addEventListener('click', function () {
  console.log("EventListener")
  $(document).on('click', 'body *', function () {
    modal.style.display = "none";
    modal.removeEventListener('mousemove', function () { console.log("NoEventListener") });
  });
});

}

行为如下：

我点击一个按钮，然后拨打openModal（console.log("OpenModal")正在工作）。出现模态，我点击body并触发事件（console.log("EventListener") is displayed）。在它之后，它不会出现console.log("NoEventListener")，因此removeEventListener无效。

然后，当我再次点击该按钮时，我再次直接致电addEventListener。

我需要的是完成eventListener

Answer 1

您需要检测点击的位置。点击是否为.modal。

$(document).on('click', function (e) {
   if (!$(e.target).parents('.modal').length || ! $(e.target).is('.modal')) {
      modal.style.display = "none";
   }
});

Answer 2

在模态功能中，您可以获取当前的显示样式并更改显示根据其价值：

openModal() {
    var modal = document.getElementById('myModal');
    var statut = modal.style.display;
    if (x === "block" {
    modal.style.display = "none";
   }
   else {
      modal.style.display = "none";
    }
  }

通过单击正文关闭模态 - 角度

2 个答案: