Click me
I know that Click here
opens the link in a new tab (default behaviour in Chrome an
Based on Sphinx's great answer, here is what I'll use to create a modal popup displaying an external website in a iframe
with a dark background for the rest of the page when the popup is open:
document.getElementById("link").onclick = function(e) {
e.preventDefault();
document.getElementById("popupdarkbg").style.display = "block";
document.getElementById("popup").style.display = "block";
document.getElementById('popupiframe').src = "http://example.com";
document.getElementById('popupdarkbg').onclick = function() {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
};
return false;
}
window.onkeydown = function(e) {
if (e.keyCode == 27) {
document.getElementById("popup").style.display = "none";
document.getElementById("popupdarkbg").style.display = "none";
e.preventDefault();
return;
}
}
#popup { display: none; position: fixed; top: 12%; left: 15%; width: 70%; height: 70%; background-color: white; z-index: 10; }
#popup iframe { width: 100%; height: 100%; border: 0; }
#popupdarkbg { position: fixed; z-index: 5; left: 0; top: 0; width: 100%; height: 100%; overflow: hidden; background-color: rgba(0,0,0,.75); display: none; }