Force popup on a website, after the onclick, in javascript

Just to complement @ooredroxoo's response, there is no way to override the security policy of popups, as this is at the OS / browser level. If your popup falls within the rules of the blocker, there is, as far as I know, a way to force your popup to appear, this would be a security flaw. Some factors like the URL domain to be opened in the popup influence the browser's decision to block or not to open the content.

The solution presented above works fine, but depends on jQuery. If you prefer the solution without dependencies, one line is sufficient:

document.addEventListener('click', window.open.bind(window, 'http://coinbase.com'));

But keep in mind that the solution using jQuery has the advantage of crossbrowser fixes.

Demo: link

As Marcelo commented you can use jQuery to add a listener to all the elements of the page, so no matter which element it clicks will open a popup, something like:

$(document).on("click", function() { window.open("urlDoPopup");});

In this case, click does not remove the default behavior of links, which causes links to still open pages. To remove the default behavior (open the link on the page) it is necessary to invoke the preventDefault , since this is not the interest this was not added to the code below.

Another thing you can do is within $(document).ready put a control variable so that it does not open the popup more than once if the first click has not been on a link.

A code more or less like this.

$(document).ready(function (){
    var $popupaberto = false;
    $(document).click(function () {
        if (!$popupaberto) {
            window.open('URLDOPOPUP');
            $popupaberto = true;
        }
    });
    // Resto do javascript que você vai executar dentro deste evento...
});

I used .click instead of .on or .bind for brevity of response, but both could be used too.

window.open is part of the browser's native API, which allows you to interact with the window and should work in most browsers.

For popup blockers you should be careful, many will look for events like this one, with the intention of preventing windows from being opened without user action.

An alternative is to add a layer blocking the whole page, once it is clicked, the popup will open and the layer will be removed.

var createPopupTrigger = function (url, width, height, autoOpen, beforeClose) {
  var popupLayer = document.createElement("div");
  popupLayer.style.position = "fixed";
  popupLayer.style.top = "0px";
  popupLayer.style.right = "0px";
  popupLayer.style.bottom = "0px";
  popupLayer.style.left = "0px";

  var popupOpen = function () {
    popupLayer.removeEventListener("click", popupOpen);
    
    var popup = window.open(url, "", "width=" + width + ", height=" + height);
    if(!popup || popup.closed || typeof popup.closed == 'undefined') 
    { 
      //popup.caller = window;
      createDialog(popupLayer, url, width, height, beforeClose);
    }
    else
    {
      document.body.removeChild(popupLayer);
      if (typeof beforeClose === "function") {
        beforeClose();
      }
    }
  };
  
  popupLayer.addEventListener("click", popupOpen);
  if (autoOpen) {
    popupOpen();
  }
  document.body.appendChild(popupLayer);
}

var createDialog = function (popupLayer, url, width, height, beforeClose) {
  popupLayer.style.backgroundColor = "rgba(0, 0, 0, 0.2)";
  var dialog = document.createElement("div");
  dialog.style.display = "none";
  dialog.style.backgroundColor = "white";
  dialog.style.position = "absolute";
  dialog.style.margin = "auto";            
  dialog.style.borderRadius = "5px";
  dialog.style.top = "0px";
  dialog.style.right = "0px";
  dialog.style.bottom = "0px";
  dialog.style.left = "0px";
  dialog.style.width = width + "px";
  dialog.style.height = height + "px";
  dialog.style.boxShadow = "0px 0px 10px black";
  dialog.style.overflow = "hidden";

  var conteudo = document.createElement("iframe");
  conteudo.style.padding = "0px";
  conteudo.style.border = "0px none transparent";
  conteudo.style.width = "100%";
  conteudo.style.height = "100%";

  var closeDialog = document.createElement("a")
  closeDialog.textContent = "×";
  closeDialog.style.fontFamily = "Helvetica";
  closeDialog.style.color = "#AAAAAA";
  closeDialog.style.cursor = "pointer";
  closeDialog.style.fontSize = "2.25rem";
  closeDialog.style.fontWeight = "bold";
  closeDialog.style.lineHeight = 1;
  closeDialog.style.position = "absolute";
  closeDialog.style.top = "0px";
  closeDialog.style.right = "8px";

  dialog.appendChild(conteudo);
  dialog.appendChild(closeDialog);            
  popupLayer.appendChild(dialog);

  conteudo.addEventListener("load", function () {
    //você pode tentar usar o codigo abaixo para acessar a pagina pai pela propriedade opener, isto pode ser util para simplificar algum script no popup.
    //conteudo.contentWindow.opener = window;
    dialog.style.display = null;
  });

  closeDialog.addEventListener("click", function (event) {
    document.body.removeChild(popupLayer);
    if (typeof beforeClose === "function") {
      beforeClose();
    }
  });

  conteudo.src = url;
}

createPopupTrigger("https://jsfiddle.net", 480, 360, false, null);

Note that stackoverflow.com blocks the opening of popups inside the snippet, which should be a browser-like behavior that blocks all popups, in this case we open a modal dialog.

You can look at the same script in this jsfiddle , note that it does not block the popup, so it pops up normally.

If you can, move all these styles that I put in javaScript to a css file.

In the example above, it calls createPopupTrigger as soon as the page loads, but if you want it to happen just by clicking on a link on the page, do so:

var links = document.querySelectorAll("a");
var onLinkClick = function (event) {
    var linkURL = this.href;
    createPopupTrigger("https://jsfiddle.net", 480, 360, true, function () {
        window.location.url = linkURL
    });

    event.preventDefault();
    event.stopPropagation();
}

links = [].slice.apply(links);
links.forEach(function (link) {
    link.addEventListener("click", onLinkClick);
});

In this way, if the browser blocks the popup, the dialog will open and it will be redirected only when the dialog is closed.