How to Open Links in a Popup Window
Well, do you know that opening a link in new tab and open link in a new popup window are 2 different things? And to implement both the functionality, One need to use different codes. I had never given this a thought before writing this article but I realized that these are 2 different things (silly mistake). In this post, I will show you how to open a link in new tab and how to open a link a popup window
HTML link in a new window
In order to open a link in a new window / tab, add target="_blank" inside the <a> tag:
<a href="../html-link.html" target="_blank">Open page in new window</a>
Open Link in a Popup Window
Normally links get opened in the same window in which they are clicked in. In order 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 make use of the onclick property and specifying a inline JavaScript code window.open as shown below.
<a href="../html-link.html" target="popup" onclick="window.open('../html-link.htm','name','width=600,height=400')">Open page in new window</a>
Here we are asking the browser to add our inline JavaScript code in the click behavior of the link by specifying the onclick attribute. We are passing the URL to be opened in popup along with the width and height of the popup window that we want to create. By adding return false we are ensuring that the default click action is not executed.
That's all
