You can use window.open():
<a href="javascript:window.open('some.html', 'yourWindowName', 'width=200,height=150');">Test</a>
Or:
<a href="#" onclick="window.open('some.html', 'yourWindowName', 'width=200,height=150');">Test</a>
Answer from Frédéric Hamidi on Stack OverflowYou can use window.open():
<a href="javascript:window.open('some.html', 'yourWindowName', 'width=200,height=150');">Test</a>
Or:
<a href="#" onclick="window.open('some.html', 'yourWindowName', 'width=200,height=150');">Test</a>
Using target='_blank' sometimes opens in a new tab, and it usually does for Firefox and Chrome. Your best best is to use Frédéric's code:
<a href="javascript:window.open('some.html', 'yourWindowName', 'width=200,height=150');">Test</a>
Videos
There's "new windows" and there's "popups". Using target=_blank will open in a new window, except that modern browsers put new windows in new tabs by default. Which sounds like it isn't what you want.
For an actual popup you want window.open(), and be sure to include some specific width and height, otherwise some browsers will still put the new window in a new tab. Darin's example looks good to me.
As for popup blocking, the general approach that browsers take is that popups initiated by user action are allowed (such as clicking), while popups initiated spontaneously through script, such as this, are blocked:
<script type="text/javascript">
window.open("http://www.google.com/", "Google", "width=500,height=500");
</script>
However, ad blocking being an escalating war, you can never be sure that a popup will open. If your popup is blocked, the window.open call returns null. So I would modify Daren's example like this:
<a href="http://www.google.com/"
onclick="return !window.open(this.href, 'Google', 'width=500,height=500')"
target="_blank">
If the popup is blocked, onclick returns true, which follows the link they clicked by opening it in a new window or tab. It's a fallback, so at least the content is accessible (if not pretty).
<a href="http://google.com" onclick="window.open(this.href, 'windowName', 'width=1000, height=700, left=24, top=24, scrollbars, resizable'); return false;">Link</a>
onClick with a function:
<script type="text/javascript">
function AlertIt() {
alert("ATTENTION! THIS IS AN ALERT");
}
</script>
<a href="javascript:AlertIt();">click me</a>
Complex single one-liner:
<a href="http://example.com/"
onclick="return alert('Please click on OK to continue.');">click me</a>
You can make use of a hashchange-event!
Make a check-hash function and call it initially, so that loading the URL with the hash has the same behavior as changing the hash when already on-page.
You could create an array holding the IDs of the elements that should "listen" for such a hashchange, and give them a specific class (e.g. .hash-selected) when their ID equals the hash.
const hashes = ["#popup"]; // List of IDs that are "listening"
let lastHash = "";
function checkHash() {
if (hashes.includes(lastHash)) // Remove class from last selected element
document.querySelector(lastHash).classList.remove("hash-selected");
if (hashes.includes(location.hash)) // Add class to current selected element
document.querySelector(location.hash).classList.add("hash-selected");
// Save current hash as 'lastHash' for first if-statement when calling 'checkHash()' again
lastHash = location.hash;
}
checkHash(); // Initial function-call for same behavior on "page-open"
window.addEventListener("hashchange", () => checkHash());
body {margin: 0}
#popup {
position: absolute;
border-bottom: 1px solid black;
width: 100%;
transform: translateY(-100%);
background: lightgreen;
}
#popup.hash-selected {transform: translateY(0)}
<div id="popup">
<p>Some sample text</p>
<a href="#">Close</a>
</div>
<a href="#popup">Open popup</a>
We could even easily fill the hashes-array with IDs of elements that have a specific class, like .hash-listen:
const hashes = [];
for (let el of document.querySelectorAll(".hash-listen"))
hashes.push("#" + el.id);
// ...
Sidenote
To remove hashchanges from the browser-history, you should take a look at this answer that demonstrates the history.replaceState()-function.
You can use the onclick attribute, just return false if you don't want continue;
<script type="text/javascript">
function confirm_alert(node) {
return confirm("Please click on OK to continue.");
}
</script>
<a href="http://www.google.com" onclick="return confirm_alert(this);">Click Me</a>
Single line works just fine:
<a href="http://example.com/"
onclick="return confirm('Please click on OK to continue.');">click me</a>
Adding another line with a different link on the same page works fine too:
<a href="http://stackoverflow.com/"
onclick="return confirm('Click on another OK to continue.');">another link</a>
Something like this?
<a href="#" onClick="MyWindow=window.open('http://www.google.com','MyWindow','width=600,height=300'); return false;">Click Here</a>
HTML alone does not support this. You need to use some JS.
And also consider nowadays people use popup blocker in browsers.
<a href="javascript:window.open('document.aspx','mypopuptitle','width=600,height=400')">open popup</a>