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

Question

As you all know, there are popup blockers that don’t let popups open automatically or the browser itself, without doing any action.

That way I need to create a code in JAVASCRIPT, which opens my desired popup as soon as the user click on the screen.

That is, I need all my pages, have some javascript code (Injection), which presents the normal content to the user, but any click on the screen he makes, is triggered a popup using the onclick method, and the link that the user clicked should also be opened on the current page.

This way, using the onclick method, it will be possible to open the popup anyway.

I look forward to it. Thank you.

Answer 1

Just to complement the @ooredroxoo response, there is no way to bypass the popup security policy, as it is at the level of OS/browser. If your popup falls within the rules of the blocker, there is, as far as I know, no way to force your popup to be displayed, this would be a security breach. Some factors such as the URL domain to be opened in the popup influence the browser’s decision whether or not to block the content opening.

The solution previously presented works well, 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 crossbrowser fixes as an advantage.

Demo: http://plnkr.co/edit/KSkJ9cwrKmTKgNx6GkoJ?p=preview

Answer 2

As Marcelo commented you can using jQuery add a Reader to all elements of the page, this way no matter which element it click will open a popup, something like:

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

In this case the on click does not remove the default behavior of links which causes the 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 inside the $(document).ready put a control variable so that it doesn’t open the popup more than once, in case the first click wasn’t 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 the .click instead of .on or .bind for brevity of response, but both could be used as well.

window.open is part of the browser’s native API, which allows interaction with the Window and should work in most browsers.

Regarding popup blockers you should be careful, many will search for events like this, with the intention of preventing windows from opening without being by user action.

Answer 3

an alternative is to add a layer blocking the entire page, once it is clicked, the popup will be opened and the layer 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 the stackoverflow.com blocks the opening of popups inside the snippet, which must be a behavior similar to that of a browser that blocks all popups, in this case we open a modal dialogue.

you can look the same script in this jsfiddle, note that it does not block the popup, so it opens normally.

if you can, move all these styles I put in Java to a css file.

In the above example, he calls the createPopupTrigger as soon as the page is loaded, 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);
});

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