uma alternativa é adicionar um layer bloqueando toda a pagina, uma vez que ela seja clickado, o popup será aberto e o layer removido.
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 que o stackoverflow.com
bloqueia a abertura de popups dentro do snippet, que deve ser um comportamento semelhante a de um browser que bloqueie todos os popups, neste caso abrimos um dialogo modal.
você pode olhar o mesmo script neste jsfiddle, note que o mesmo não bloqueia o popup, então o mesmo abre normalmente.
caso possa, mova todos estes estilos que coloquei no javaScript para um arquivo css.
No que no exemplo acima, ele chama o createPopupTrigger
assim que a pagina é carregada, porem caso deseje que aconteça apenas ao clicar em algum link da pagina, faça assim:
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);
});
desta forma, se o browser bloquear o popup, o dialogo irá abrir e ele será redirecionado apenas quando o dialogo for fechado.
alert
nativa?