Different ways to opening new windows using JavaScript

JavaScript

If you notice on most of the websites on the internet and inside most of web applications, you will find that opening a new window is a popular way of letting users/readers see additional information without navigating away from the current page. With JavaScript you can specify the dimensions, position and visible toolbars of this newly created window, as well as writing code directly into it and having the two windows operating together. To this aspect of modern web engineering, I will show you multiple ways to open a new window without interfering the current page.

Using <a href link tag

This tag will let user open a page without closing the current page:

<a href=”popup.html” target=”_blank”>Click here</a> to open new page

Using JavaScript OnClick() function

This function will let users open a brand new window with a defined size, then users can re-size the window when needed.

<a href=”javascript:void(0)” OnClick=”window.open(‘popup.html’, ‘pagename’, ‘height=400, width=400, location=no, resizable=yes, scrollbars=yes’);”>Click here</a> to open new page.

This method has some parameters below when you call the window.open function:

height Defines the height of the window in pixels. Percentage values don’t work.
width Defines the width. Again, you’ll have no joy with percentages.
left Supported by version 4 browsers and above, this sets how far removed the
window appears from the left of the screen. In pixels.
top Partner to left, this pushes the window off the top of the screen.
resizable Set to true or false, this may allow the user to resize the window.
scrollbars Another Boolean value, this adds scrollbars to the new window. If your
content may be longer then the dimensions you’ve specified, make sure this
is set to yes.
toolbar Specifies whether the basic back/forward toolbar should be visible. If
there are links to follow in your new page, set this to yes.
menubar Specifies whether the main toolbar (File, Edit, …) is shown.
location Specifies whether the location toolbar (address bar) is shown.
status Specifies whether the new window can have a status bar. Best set to yes.
For security reasons, Mozilla-based browsers always show the status bar.
directories Specifies whether the directories toolbar is shown (Links toolbar in IE).
fullscreen This parameter is optional. Works only in Internet Explorer-only Boolean
attribute which may open the window in fullscreen. It’s not a good idea
to use it.

Using <div> tag for a popup window

This method you will have to download jquery.min.js and fancyzoom.js files from jquery. Then you can add a <div> tag on the same page that includes these 2 JavaScript files. You will have to remember to download all images that are decorating the jQuery box, so it looks more professional. This method won’t be described here since you can get more details on jQuery website.