Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

JavaScript / jQuery - Open current link in pop-up window

Tags:

<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

like image 451
Alex Avatar asked Jul 10 '10 13:07

Alex


People also ask

How do I open a URL with a popup screen?

just using window. open(with out any function) in html solved my problem. When i type page1. html in browser address,it opens google page as a popup.

How do I open a link in a modal window?

To trigger the modal window, you need to use a button or a link. Then include the two data-* attributes: data-toggle="modal" opens the modal window. data-target="#myModal" points to the id of the modal.

How do I open a popup with JavaScript?

The syntax to open a popup is: window. open(url, name, params) : url. An URL to load into the new window.

How do I open HTML page as popup within another HTML page?

You can simply use <iframe> to display the another page content in the modal content.


2 Answers

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).

like image 80
jpsimons Avatar answered Sep 21 '22 19:09

jpsimons


<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> 
like image 30
Darin Dimitrov Avatar answered Sep 21 '22 19:09

Darin Dimitrov