How to set a timeout for a popup and close if user clicks elsewhere?

Question

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

Perhaps something like `body.addEventListener('click', e => e.target.matches('#myPopup, #myPopup *') || hidePopup())`? — InSync, Jun 01 '23 at 12:19

Kavan Prajapati · Answer 1 · 2023-06-01T12:45:09.627

1

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")
        }
    }
});

edited Jun 01 '23 at 12:45

answered Jun 01 '23 at 12:19

Kavan Prajapati

441
2
9

Brother58697 · Accepted Answer · 2023-06-01T12:47:01.540

To do this you need to:

Define a function, hide() that hides the popup.
Add an mousedown event listener to the whole document that invokes hide
- Within hide, ensure that the click event's target is not contained in the popup.
Set up the timeout to call hide
Important: Have hide clear the created timeout and remove the listener that was added.

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

.popuptext {
  display: none;
}

.popuptext.show {
  display: block;
}

<div class="popup" onclick="myFunction()">Click me to toggle the popup!
  <span class="popuptext" id="myPopup">A Simple Popup!</span>
</div>

this will close popup even when user click on the popup – NAZIR HUSSAIN Jun 01 '23 at 12:32 — NAZIR HUSSAIN, Jun 01 '23 at 12:32

score 0 · Answer 3 · answered Jun 01 '23 at 12:42

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.

score -1 · Answer 4 · answered Jun 01 '23 at 12:29

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();});

How to set a timeout for a popup and close if user clicks elsewhere?

4 Answers4