如何只点击模态外观而不点击 dialog/content？

Question

所以我正在和我的朋友一起为 Google Chrome 做一个扩展，对于大多数功能（即日历、设置等），我们打开一个模式，所以我们不不必重定向到另一个页面。当您在内容之外单击时，我们正在尝试关闭模式。这是一个小标记屏幕截图，让您了解我在说什么。

我希望能够通过在白色区域外单击来关闭模式。目前，即使我在白色区域内单击，它也会关闭。我几乎尝试了所有方法，包括 stopPropagation()、pointer-events:none; 和 jquery 禁用。 None 他们的工作原因我不知道。我猜 Chrome 扩展有些奇怪。到目前为止，这是我的一些代码：

    function calendar() {
      document.getElementById("calendmodal").style.display = "block";
    }

document.addEventListener("DOMContentLoaded", function () {
  document.getElementById("calendicon").addEventListener("click", calendar);
  document.getElementById("calendmodal").addEventListener("click", closeModal);
  document.getElementById("calendmodal").addEventListener("click", function(event) {
    event.stopPropagation();
  });  
});

和HTML：

<div class="icons" id="icons_calendar">
        <img src='https://preview.ibb.co/jE76Bm/calendar.png' alt="calendar" border="0" id="calendicon"/>
      </div>
    <div id=calendmodal class="generalmodal">
      <div class="modal-content" id="calendcontent">
        <iframe src="https://calendar.google.com/calendar/embed?src=googleapps.wrdsb.ca_ptpdj55efmhg1nb89ruc15fi3k%40group.calendar.google.com&ctz=America%2FToronto" style="border: 0" width="800" height="600" frameborder="0" scrolling="no" visibility="hidden" id="calendiframe"></iframe>
        <p id=infostuff>For a more extensive calendar and<br>more school tools, visit <a href="http://jam.wrdsb.ca">The SJAM Website</a>.</p>
      </div>
    </div>

不太确定我做错了什么，我不知道如何在扩展程序中执行此操作。

Answer 1

在您之前的尝试中，您在哪里执行 event.stopPropagation()？它不包含在您的代码示例中。

您需要做的是防止 #calendmodal 上的 click 事件冒泡 DOM 并触发 body（或其他容器）上的点击事件元素），其事件处理程序关闭您的模态对话框。

您可以这样做：

document.getElementById("calendmodal").addEventListener("click", function(event) {
    event.stopPropagation();
});

Answer 2

我不知道你是如何显示模态对话框的，但我对这个问题的处理方法是这样的（你可以根据你的具体情况进行调整）：

我有一个透明的 <div> 作为占据整个屏幕的容器，在其中，我使用 CSS 放置模态对话框。类似于：

<div id="container" style="position:fixed;top:0;bottom:0;left:0;right:0;display:none">
    <div id="myModal" style="position:absolute;width:300px;height:200px;left:100px;top:100px">
        <!-- Here goes my content -->
    </div>
</div>

使用这种方法，为了显示对话框，我做了如下操作：

function openModal(){
  document.getElementById("container").style.display = "block";
}

并在点击透明背景而不是对话框时关闭它我有：

document.getElementById("container").onclick = function(event) {
  if (event.target === this) {
    this.style.display = "none";
  }
};

如何只点击模态外观而不点击 dialog/content？

How to make click only on modal exterior and not on dialog/content?

javascript

html

css

google-chrome-extension

event-bubbling