JavaScript pop-up windows can be really pain in the back, especially when automated but there are some occasions when JavaScript pop-up windows can be very useful. That is a case when you want to display a group of small thumbnail images that the user can click to view a larger image, provide a user with brief access to terms and conditions without interrupting the checkout process…

In dealing with JavaScript pop-up windows you must remain aware that there will be always users with browsers that don’t support JavaScript or users who have JavaScript disabled in their browsers. What we want is to create JavaScript pop-up windows that will be accessible to everyone.

Here is usual way of creating JavaScript pop-up windows:

<a href="javascript:void(0)" onclick= "window.open('popuppage.html','NameOfThePAge','width=600,height=480,menubar=yes,
status=yes,location=yes,toolbar=yes,scrollbars=yes')">Open a pop-up page</a>

You can add more features in order to define properties of new opened windows. Here are features of JavaScript Window Object Open Method with explanation. Find more on W3schools HTML DOM

• channelmode – Whether or not to display the window in theater mode. Default is no
• directories – Whether or not to add directory buttons. Default is yes
• fullscreen – Whether or not to display the browser in full-screen mode. Default is no. A window in full-screen mode must also be in theater mode
• height=pixels – The height of the window. Min. value is 100
• left=pixels – The left position of the window
• location= – Whether or not to display the address field. Default is yes
• menubar= – Whether or not to display the menu bar. Default is yes
• resizable= – Whether or not the window is resizable. Default is yes
• scrollbars= – Whether or not to display scroll bars. Default is yes
• status= – Whether or not to add a status bar. Default is yes
• titlebar – Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box. Default is yes
• toolbar – Whether or not to display the browser toolbar. Default is yes
• top=pixels – The top position of the window
• width=pixels – The width of the window. Min. value is 100

Note that if you write only one feature JavaScript interpreter will ignore the absent features.

But this method is useless if JavaScript is disabled. Link will lead nowhere.

Here is out of box solution:

First create file popup.js and copy the following code in it.

window.onload = function() {
	if (!document.getElementsByTagName) {
		return false;
	}
	var popuplinks = document.getElementsByTagName("a");
	for (var i=0; i < popuplinks.length; i++) {
		if (popuplinks[i].getAttribute('className') == "popup") {
			popuplinks[i].onclick = function() {
			openPopUp(this.getAttribute("href"));
			return false;
			}
		}
	}
}

function openPopUp(linkURL) {
window.open(linkURL,'popup','width=400,height=200,toolbar=no,location=no,
directories=no,status=no,menubar=no,scrollbars=no,resizable=no,copyhistory=no')
}

Then you will need to link to this file in the head of your document like so:

<script type="text/javascript" src="popup.js"></script>

Put this HTML markup somewhere in your file.

<a href="popuppage.html" class="popup">View new page</a>

You can also add pop-up to your images. Only important thing is class="popup" Here is code for pop-up images:

<a href="images/big.jpg" class="popup"> <img src="images/small.png" alt="Smal" /></a>

Change with and height features in popup.js to match image width and height.

This way of creating pop-up windows is accessible and usable. In most browsers it will render as we like but If JavaScript is disabled we will have just normal hyperlink.

Here is live example JavaScript pop-up windows.