Question

这是HTML代码，请查看完整工作代码的小提琴 - https://jsfiddle.net/fmqgeqby/

<a class="" href="#popup1">Get a Quote</a>
<div id="popup1" class="myoverlay">
<div class="mypopup">
<h2>REQUEST A PHONE CALL</h2>
<a class="myclose" href="#">×</a>

当用户在网站外点击时，是否有任何可能的解决方案来关闭弹出窗口？

Answer 1

抱歉jsfiddle无法正常工作，所以我看不到它，但是你能改变它来使用bootstrap吗？ Bootstrap的模态非常有效。

如果没有，你可以模仿他们用你自己的代码做的一些事情。

https://www.w3schools.com/bootstrap/bootstrap_modal.asp

Answer 2

一种方法是使用隐藏复选框的html标签。您需要两个标签才能切换复选框 - 一个在弹出窗口之外，另一个在内部。不是最干净的解决方案，但有效：

HTML：

<label for="toggle"><a href="">Get a Quote</a></label>
<input type="checkbox" id="toggle">

<div id="popup1" class="myoverlay">
  <label for="toggle"></label>
  <div class="mypopup">
    <h2>REQUEST A PHONE CALL</h2>
    <a class="myclose" href="#">×</a>
    <div class="mycontent">
      <p> Hello </p>
    </div>
  </div>
</div>

CSS：

input[type=checkbox] {
  position: absolute;
  left: -999em;
}

input[type=checkbox]:checked ~ #popup1 {
  visibility: visible;
  opacity: 1;
}

#popup1 label {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
}

Full example here

如何在任何地方或外部点击关闭这个纯css弹出窗口？

2 个答案: