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.
Fábio, welcome to Stackoverflow! You’re referring to a new window, a dialog on the page or the
alert
native?– Sergio
Maybe with jquery you can get something like $(Document). on("click", Function() { window.open("http://www.stackoverflow.com");});
– Marcelo Gomes
Wait is click anywhere or just links, why did you say that "and the link that the user clicked should also be opened on the current page", this is a bit confusing, please edit the question and try to make it clearer what you need.
– Guilherme Nascimento
have you considered using jQuery . dialog()?
– SneepS NinjA