如何创建一个自定义的模式弹出窗口-以及如何在它的外部点击关闭它

How to create a custom modal popup - and how to close it clicking outside of it

本文关键字：外部 创建 何创建 一个 模式 自定义 窗口      更新时间：2023-09-26
<a href="javascript:void(0)" onclick = "document.getElementById('light3').style.display='block';document.getElementById('fade').style.display='block'"><button type="button" name="" value="" id="readmorelink3">+<span class="rmore">Read More</span></button></a>

我使用上面的DOM经典onClick将div简单地显示为一个简单的弹出窗口。我已经在div中创建了一个关闭按钮，但当用户单击body或任何不是打开div的地方时，我也希望打开div hide

我的简单叠加(1/3(

<!-- read more overlays 1 -->
<div id="light" class="white_content">
<a class="close" href="javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'" class="textright" style="color: #DDD !important; float:right;">CLOSE X</a>
<h4>[Hey+]</h4>
<h3>Demo</h3>
<h3>SUP</h3>
<span> 2.5 fl. oz.</span><br>
<br>
<p>
Cool content, about cool things.
</p>
</div>
<!-- // read more overlays 1-->

我试过这个家伙：

$(document).click(function() {
    $('#mydiv').fadeOut(300);
});

我搞砸了这个家伙：

 if($('#mydiv').is(":not(:visible)") ){

//如果可见，反之亦然

也尝试过。

 // To prevent hide #menu when click on #main
    $('#mydiv').click(function (e) {
        e.stopPropagation();
});
 // Click outsite of #menu
    $('html').click(function () {
    $('#mydiv').hide();
});

意识到我应该用简单的jQuery而不是内联来完成这项工作；但我不想重做所有的东西，所以寻求DOM/JavaScript解决方案。只需关闭打开或显示：当它们被显示时，通过点击元素外部或body标记来阻止divs>

EG：DIV覆盖显示>点击元素外部，它关闭。我在BODY标签上添加了ONCLICK-CLOSE按钮，但它完全杀死了POPUP，添加了一个包装，没有雪茄。

看到这个答案：在外部(而不是内部(单击时关闭/隐藏元素

  • 使用EventTarget.addEventListener((将所需的事件侦听器(如"click"(分配给document或window
  • 将Event.target与Element.closest((组合用作否定!-，以检查Event.targets(启动事件的元素(-其自身或最近的祖先是否具有特定的选择器
  • 要控制元素可见性，请创建一个进行必要样式设置的CSS类，并使用element.classlist添加、删除或切换该类(根据需要(

模式示例：

// DOM utility functions:
const el = (sel, par) => (par ||document).querySelector(sel);
const els = (sel, par) => (par ||document).querySelectorAll(sel);

// Task: modal:
const toggleModal = (evt) => {
  const sel = evt.currentTarget.dataset.modal;
  if (!sel) evt.currentTarget.closest(".Modal").classList.remove("is-open");
  el(sel).classList.add("is-open")
};
els("[data-modal]").forEach(elModalButton => {
  elModalButton.addEventListener("click", toggleModal);
});
addEventListener("click", (evt) => {
  // if click on button or inside modal — do nothing
  if (evt.target.closest("[data-modal]") || evt.target.closest('.Modal')) return;
  // else — close any open modal:
  els(".Modal.is-open").forEach(elModalOpen => {
    elModalOpen.classList.remove("is-open");
  });
});
/* MODAL */
.Modal {
  position: fixed;
  z-index: 99999;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 200px;
  padding: 2em;
  background: gold;
  
  /*Hide modal by default */
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: 0.4s;
}
.Modal.is-open {
  background: red !important;
  pointer-events: auto;
  visibility: visible;
  opacity: 1;
}
<button data-modal="#modal_1" type="button">Call modal 1</button>
<button data-modal="#modal_2" type="button">Call modal 2</button>

<div class="Modal" id="modal_1">
  <h2>Modal 1 title</h2>
  <p>Pop 1 description...</p>
  <button type="button" data-modal>OK</button>
</div>
<div class="Modal" id="modal_2">
  <h2>Modal 2 title</h2>
  <p>Pop 2 description...</p>
  <button type="button" data-modal>OK</button>
</div>

一个快速(可能在计算上有点昂贵(的肮脏黑客可能是这样的：

$("body").click(function() {
    $(".white_content").each(function(){
        if($(this).css("display") !== "none")
        { 
            $(this).hide();
        }
    });
});

工作小提琴。

试试这个：

  $("body").click(function (e) {
            var elt = $(e.target);
    if (!($(e.target).attr("id") == "light") && !($(e.target).parents("div").attr("id")=="light"))
            {
                $("#light").hide();
            }
        });

这取决于你的条件。不管怎样，我已经编辑了我的帖子，你现在可以查看了。

相关文章：