通过在其外部单击来关闭弹出窗口 javascript [英] Close popup by clicking outside it javascript
本文介绍了通过在其外部单击来关闭弹出窗口 javascript的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我使用本教程向我的网页添加弹出窗口.有没有办法让它在你点击它外面/点击另一个弹出窗口时关闭.
我尝试按照这篇文章添加一个 invisibleDiv 通过在弹出 div 外部单击来关闭它，但只有在单击按钮本身时，弹出窗口才会移动.
https://www.w3schools.com/howto/howto_js_popup.asp
//当用户点击div时，打开弹窗函数 myFunction() {var popup = document.getElementById("myPopup");popup.classList.toggle("show");}/* 弹出容器 - 可以是任何你想要的 */.弹出 {位置:相对；显示:内联块；光标:指针；-webkit-user-select:无；-moz-user-select:无；-ms-user-select:无；用户选择:无；}/* 实际弹出窗口 */.popup .popuptext {可见性:隐藏；宽度:160px；背景色:#555；颜色:#fff;文本对齐:居中；边框半径:6px；填充:8px 0;位置:绝对；z-索引:1；底部:125%；左:50%；左边距:-80px；}/* 弹出箭头 */.popup .popuptext::after {内容: "";位置:绝对；顶部:100%；左:50%；左边距:-5px；边框宽度:5px；边框样式:实心；边框颜色:#555 透明透明透明；}/* 切换这个类 - 隐藏和显示弹出窗口 */.popup .show {可见性:可见；-webkit-animation:fadeIn 1s;动画:淡入 1 秒；}/* 添加动画(在弹出窗口中淡出)*/@-webkit-keyframes 淡入{来自{不透明度:0;}{不透明度:1;}}@关键帧淡入{来自{不透明度:0;}到{不透明度:1;}}<头><meta name="viewport" content="width=device-width, initial-scale=1"><body style="text-align:center"><h2>弹出窗口</h2><div class="popup" onclick="myFunction()">点击我切换弹出窗口！<span class="popuptext" id="myPopup">一个简单的弹出窗口！</span></html>
解决方案
拥有一个全局点击处理程序来检查被点击元素的 classList 是一种在点击外部时关闭弹出窗口的方法.下面是一个例子:
const popups = [...document.getElementsByClassName('popup')];window.addEventListener('click', ({ target }) => {const popup = target.closest('.popup');const clickedOnClosedPopup = popup &&!popup.classList.contains('show');popups.forEach(p => p.classList.remove('show'));if (clickedOnClosedPopup) popup.classList.add('show');});/* 弹出容器 - 可以是任何你想要的 */.弹出 {位置:相对；显示:内联块；光标:指针；-webkit-user-select:无；-moz-user-select:无；-ms-user-select:无；用户选择:无；}/* 实际弹出窗口 */.popup .popuptext {可见性:隐藏；宽度:160px；背景色:#555；颜色:#fff;文本对齐:居中；边框半径:6px；填充:8px 0;位置:绝对；z-索引:1；底部:125%；左:50%；左边距:-80px；}/* 弹出箭头 */.popup .popuptext::after {内容: "";位置:绝对；顶部:100%；左:50%；左边距:-5px；边框宽度:5px；边框样式:实心；边框颜色:#555 透明透明透明；}/* 切换这个类 - 隐藏和显示弹出窗口 */.popup.show .popuptext {可见性:可见；-webkit-animation:fadeIn 1s;动画:淡入 1 秒；}/* 添加动画(在弹出窗口中淡出) */@-webkit-keyframes 淡入{来自{不透明度:0;}{不透明度:1;}}@关键帧淡入{来自{不透明度:0;}到{不透明度:1;}}<h2>Popup</h2><div class="popup">点击我切换弹窗！<span class="popuptext">一个简单的弹出窗口！</span><div class="popup">点击我切换弹窗！<span class="popuptext">一个简单的弹出窗口！</span>
I used this tutorial to add popups to my webpage. Is there a way to make it so a popup closes when you click outside it/click on a different one.
I've tried adding an invisibleDiv as per this post Close pop up div by clicking outside of it but the popup is still only moving when the button itself is clicked.
https://www.w3schools.com/howto/howto_js_popup.asp
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup .show {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body style="text-align:center">
<h2>Popup</h2>
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
</body>
</html>
解决方案
Having a global click-handler that checks the clicked element's classList is one way to close the pop-up when clicking outside of it. Here is an example:
const popups = [...document.getElementsByClassName('popup')];
window.addEventListener('click', ({ target }) => {
const popup = target.closest('.popup');
const clickedOnClosedPopup = popup && !popup.classList.contains('show');
popups.forEach(p => p.classList.remove('show'));
if (clickedOnClosedPopup) popup.classList.add('show');
});
/* Popup container - can be anything you want */
.popup {
position: relative;
display: inline-block;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
/* The actual popup */
.popup .popuptext {
visibility: hidden;
width: 160px;
background-color: #555;
color: #fff;
text-align: center;
border-radius: 6px;
padding: 8px 0;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -80px;
}
/* Popup arrow */
.popup .popuptext::after {
content: "";
position: absolute;
top: 100%;
left: 50%;
margin-left: -5px;
border-width: 5px;
border-style: solid;
border-color: #555 transparent transparent transparent;
}
/* Toggle this class - hide and show the popup */
.popup.show .popuptext {
visibility: visible;
-webkit-animation: fadeIn 1s;
animation: fadeIn 1s;
}
/* Add animation (fade in the popup) */
@-webkit-keyframes fadeIn {
from {opacity: 0;}
to {opacity: 1;}
}
@keyframes fadeIn {
from {opacity: 0;}
to {opacity:1 ;}
}
<h2>Popup</h2>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
<div class="popup">Click me to toggle the popup!
<span class="popuptext">A Simple Popup!</span>
</div>
这篇关于通过在其外部单击来关闭弹出窗口 javascript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
