gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 16:23:22 33 4
gpt4 key购买 nike

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

enter image description here我希望能够通过在白色区域外单击来关闭模式。目前,即使我在白色区域内单击,它也会关闭。我几乎尝试了所有方法,包括 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:

<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>

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

最佳答案

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

我有一个透明的<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";
}
};

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

33 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com