英文:
How to set a timeout for a popup and close if user clicks elsewhere?
问题
我创建了一个弹出窗口，当我点击按钮时它会出现，但要让它消失，我必须再次点击。有没有办法设置一个定时器来让它消失？
功能：
// 当用户点击div时，打开弹出窗口
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
样式：
.popuptext {
display: none;
}
.popuptext.show {
display: block;
}
HTML：
<div class="popup" onclick="myFunction()">点击我切换弹出窗口！
<span class="popuptext" id="myPopup">一个简单的弹出窗口！</span>
</div>
我需要在10秒后或用户点击其他地方时关闭弹出窗口。
我编辑了代码如下，它确实会在10秒后关闭，如何实现第二部分（当用户点击其他地方时关闭）：
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if (popup.classList.contains("show"))
setTimeout(() => popup.classList.remove("show"), 10000)
}
英文:
I created a popup that appears when I click a button, but to make it disappear I have to click again. Is there a way to set a timer and make it disappear?
Function:
// When the user clicks on div, open the popup
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
}
Style:
.popuptext {
display: none;
}
.popuptext.show {
display: block;
}
The HTML:
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
I need the popup to close after 10 seconds OR when the user clicks somewhere else.
I edited the code to below and it does close after 10 seconds, how to achieve the second part (close when user clicks somewhere else):
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.toggle("show");
if(popup.classList.contains("show"))
setTimeout(() => popup.classList.remove("show"), 10000)
}
答案1
得分: 1
检查点击事件是否发生在popup上。
$('body').click(function(e) {
if (!$(e.target).closest('.popup').length){
// 您点击了弹出框外部，编写关闭弹出框的逻辑
var popup = document.getElementById("myPopup");
if(popup.classList.contains("show")){
popup.classList.remove("show")
}
}
});
英文:
check with click event occurred not on popup
$('body').click(function(e) {
if (!$(e.target).closest('.popup').length){
// you clicked outside of popup, write your logic to close popup
var popup = document.getElementById("myPopup");
if(popup.classList.contains("show")){
popup.classList.remove("show")
}
}
});
答案2
得分: 1
要实现这个，您需要：
- 定义一个名为
hide()的函数，用于隐藏弹出窗口。 - 为整个
document添加一个mousedown事件监听器，调用hide- 在
hide函数中，确保点击事件的target不包含在弹出窗口中。
- 在
- 设置超时调用
hide - 重要提示：确保
hide清除创建的超时和移除添加的监听器。
英文:
To do this you need to:
- Define a function,
hide()that hides the popup. - Add an
mousedownevent listener to the wholedocumentthat invokeshide- Within
hide, ensure that the click event'stargetis not contained in the popup.
- Within
- Set up the timeout to call
hide - Important: Have
hideclear the created timeout and remove the listener that was added.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-js -->
function myFunction() {
var popup = document.getElementById("myPopup");
popup.classList.add('show')
let timeout;
function hide(e) {
if (popup.contains(e.target)) return;
popup.classList.remove("show");
document.removeEventListener('mousedown', hide);
clearTimeout(timeout)
}
document.addEventListener('mousedown', hide)
timeout = setTimeout(hide, 10000)
}
<!-- language: lang-css -->
.popuptext {
display: none;
}
.popuptext.show {
display: block;
}
<!-- language: lang-html -->
<div class="popup" onclick="myFunction()">Click me to toggle the popup!
<span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>
<!-- end snippet -->
答案3
得分: 0
我在其他答案中所缺少的是，你正在寻找的东西被称为事件委托。
通过将点击事件附加到文档上，你可以使用JavaScript来查看到底点击了什么：
document.addEventListener("click", function(e){
// 被点击的是什么？
const elementClicked = e.target.id;
});
现在你可以对其进行操作：
document.addEventListener("click", function(e){
// 被点击的是什么？
const elementClicked = e.target.id;
if(elementClicked == 'your_button')
{
// 点击了你的按钮。为用户弹出模态框并设置定时器。
}
else
{
// 点击了其他东西。如果存在弹出框，则关闭它。禁用定时器。
}
});
你看到事件委托的威力了吗？现在你可以捕获任何点击，无论是什么，然后根据它是什么来执行某些操作。
英文:
What I'm missing in the other answers is that what you're looking for is called Event Delegation.
By attaching a click event to your document, you can use Javascript to see what exactly has been clicked:
document.addEventListener("click", function(e){
// What has been clicked?
const elementClicked = e.target.id;
});
Now you can work with it:
document.addEventListener("click", function(e){
// What has been clicked?
const elementClicked = e.target.id;
if(elementClicked == 'your_button')
{
// Your button is clicked. Popup your modal for the user and set the timer.
}
else
{
// Something else was clicked. Close the popup IF it exists. Disable the timer.
}
});
You see the power of event delegation? You can now catch any click, regardless of what it is, and do something with it, depending on what it is.
答案4
得分: -1
第一种方式
<html>
<body>
<div id="flyout-example">
<h5>这可能是一个弹出窗口;</h5>
<div id="flyout-debug"></div>
<div>
<button class="button button-outline" type="button">取消</button>
<button class="button" type="button">确定</button>
</div>
</div>
<script>
document.addEventListener("click", (evt) => {
const flyoutEl = document.getElementById("flyout-example");
let targetEl = evt.target; // 点击的元素
do {
if(targetEl == flyoutEl) {
// 这是内部点击，什么都不做，只是返回。
document.getElementById("flyout-debug").textContent = "点击了内部!";
return;
}
// 向上遍历DOM
targetEl = targetEl.parentNode;
} while (targetEl);
// 这是外部点击。
document.getElementById("flyout-debug").textContent = "点击了外部!";
});
</script>
</body>
</html>
第二种方式
$(window).click(function () { // 如果可见，隐藏菜单 });
如果弹出窗口在点击时关闭，请使用 `stopPropagation`
```javascript
$('#menucontainer').click(function (event) {event.stopPropagation();});
英文:
you can achieve this in two different ways
First
<html>
<body>
<div id="flyout-example">
<h5 >This could be a flyout;</h5>
<div id="flyout-debug"></div>
<div>
<button class="button button-outline" type="button">Cancel</button>
<button class="button" type="button">Ok</button>
</div>
</div>
<script>
document.addEventListener("click", (evt) => {
const flyoutEl = document.getElementById("flyout-example");
let targetEl = evt.target; // clicked element
do {
if(targetEl == flyoutEl) {
// This is a click inside, does nothing, just return.
document.getElementById("flyout-debug").textContent = "Clicked inside!";
return;
}
// Go up the DOM
targetEl = targetEl.parentNode;
} while (targetEl);
// This is a click outside.
document.getElementById("flyout-debug").textContent = "Clicked outside!";
});
</script>
</body>
</html>
Second
$(window).click(function () { //Hide the menus if visible });
if popup is getting close when clicking on it use stopPropogation
$('#menucontainer').click(function (event) {event.stopPropagation();});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论