Trung tâm cá nhân
sách gpt4 ai đã đi

javascript - 如何只点击模态外观而不点击对话框/内容？

In lại 作者：行者123 更新时间：2023-11-28 16:23:22 33 4
mua khóa gpt4 Nike

因此，我正在与我的 friend 一起为 Google Chrome 开发一个扩展程序，对于大多数功能(即日历、设置等)，我们打开一个模式，这样我们就不必重定向到另一个页面。当您在内容之外单击时，我们正在尝试关闭模式。这是一个小标记屏幕截图，可以让您了解我在说什么。

nhập mô tả hình ảnh ở đây我希望能够通过在白色区域外单击来关闭模式。目前，即使我在白色区域内单击，它也会关闭。我几乎尝试了所有方法，包括 stopPropagation(),pointer-events:none; 和 jquery 禁用。由于我不知道的原因，它们都不起作用。我猜 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:


        calendar
      

    

      

        
        
For a more extensive calendar and
more school tools, visit The SJAM Website.

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

1 Câu trả lời

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

我有一个透明的

作为占据整个屏幕的容器，并在其中使用 CSS 定位模式对话框。像这样的东西:


使用这种方法，为了显示对话框，我做了类似的事情:

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

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

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

关于javascript - 如何只点击模态外观而不点击对话框/内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48454303/

33 4 0
Bài viết được đề xuất: html - 需要日历字形图标紧挨着输入的布局
Bài viết được đề xuất: html - :checked selector not changing desired css
Bài viết được đề xuất: html - :before content css does not work with Safari
行者123
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Các bài viết nóng hổi trên toàn bộ trang web
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com