How to Open Links in a Popup Window

Popup windows are not always desirable but there may be a genuine need for opening links in a popup window in web applications. In this post, I will show how to open link in a popup window.

Open Link in a Popup Window

Normally links get opened in the same window in which they are clicked in. To open them in a new window, we add target="_blank" attribute to links. However to open the links in a separate popup window, we can use onclick property and specifying a inline JavaScript code window.open as shown below.

HTML and JavaScript code for Popup

<a onclick="window.open('https://www.google.com/','popup','width=680,height=600'); return false;" href="https://www.google.com/" target="popup">
    Open Link in Popup Window
</a>

We are passing the URL to be opened in popup along with the width and height of the popup window. By adding return false we are ensuring that the default click action is not performed.

Click on the button below to see the above code in action.

This kind of popup should not be blocked by the browser as we are opening just one new window on user click, however you may need to temporarily disable the popup blocker in order to see it in action.