JavaScript / jQuery - Open current link in pop-up window
Solution 1
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).
Solution 2
<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>
Solution 3
This will open a new window.
<a href="http://google.com" target="_blank">Link</a>
Related videos on Youtube
Comments
-
Alex almost 2 years
<a href="http://google.com">Link</a>
How can I open this link in a pop-up window? And prevent the browser to block it
-
Andrew almost 14 yearsIf you are using XHTML Strict, the
target
attribute doesn't validate and you should attach an event (such as 'onclick') instead. If you are using an older doctype, you're fine withtarget="_blank"
. -
Simon almost 14 yearsOne interesting bug i have noticed according
window.open
. if the url starts withhttp://...
, it doesn't work in ie ... -
Nick Craver almost 14 years@Andrew - IMO that was an absolutely ridiculous decision on the W3C's part (deprecating
target
)...one that has been reversed in HTML5, in case anyone finds this later wondering. -
jpsimons almost 14 yearsI should also add, it's a good idea to have your popup content not be totally broken if it opens in a full-sized browser window, because of this fallback, and because the user could always right-click the link and "open in new tab or window" which circumvents the onClick handler altogether.
-
Andrew almost 14 yearsI've not been following the HTML5 specs recently, but the latest revisions on W3C says
target
is still "unnecessary. Omit it altogether." I'm not defending this, but the idea is that HTML is supposed to be used for layout (defining the relationships between page data), CSS is for presentation and JS is for behaviour. And under this system, clicking on a link to open a window is a behaviour. That said, HTML5's CSS extensions are full of this kind of violation, so I don't see what the problem is.