I was developing an application that programmatically shows a popup after 5 seconds, but i found out that web browsers like firefox, chrome, internet explorer, etc. were blocking the popup.

Popup blocking In the past, evil sites abused popups a lot. A bad page could open tons of popup windows with ads. So now most browsers try to block popups and protect the user.

Most browsers block popups if they are called outside of user-triggered event handlers like onclick

By default modern web browsers block popups triggered by a function or code. But does not block popups triggered by clicking on buttons.

// popup blocked
window.open('https://javascript.info');

// popup allowed
button.onclick = () => {
  window.open('https://javascript.info');
};

So i had to bypass their blocking policy by programmatically clicking on the button after 5 seconds to still initiate the same popup.

So i decided to post this as a question and also answer it by myself for those that might be facing the same issue.

Step 1. Create a button, give it and ID and pass a function name on the onClick

<button id="buttonID" onclick="trigerPopup()"></button> 

Step 2 Create trigerPopup function

function trigerPopup(){
        alert("Hello I am poping up after 5 seconds");
        //your code goes here
}

Step 3 After 5 seconds, programmatically clicked on button

    window.setTimeout(function () {

        //this will trigger a click on the button
        const buttonID = document.getElementById('buttonID').click();


   }, 5000);

Thanks guys