Javascript

How to open a popup window?

Hello, friends today we will learn how to open a new popup window using javascript. To open a new window by clicking on the button/any link, we will need to use the window. open method of javascript.

code of a popup window

Example code : 
<a href="javascript: void(0)" onclick="window.open('phpglossary-open-new-popup-window.html', 'phpglossary', 'width=200, height=200'); return false;">Click here</a>

By using the above code now we can open a new simple window, also this function can have different features of that window to appear.

Syntax

window.open([URL of the page], [Window Name], [Feature List], [Replace]);

Feature List:

Property Default value Description
Height auto Height of the new window in pixels
Width auto Width of the new window in pixels
Top auto Top position new window
Left auto Left position new window
Address bar no An address bar to be shown or not?
Resizable no Whether a window can be resized or not.
Menubar no Presence of the menu bar
Toolbar no Toolbar to be visible or not.
Scroll bars no Scroll bar to be visible or not.
Status no Status bar to be visible or not.
Example code:
<a href="javascript: void(0)" 
   onclick="phpglossary-open-new-popup-window.html', 'phpglossary', 
  'width=600, \
   height=500, \
   directories=no, \
   location=no, \
   menubar=no, \
   resizable=no, \
   scrollbars=1, \
   status=no, \
   toolbar=no'); 
  return false;">Click here</a>

Code for a full-screen pop-up window

Only Internet Explorer browser supports the fullscreen parameter.

So, if we need to open the fullscreen popup window in all browsers then we will use below modified function:

Below Code for all browsers fullscreen popup window

Example code:
<script type="text/javascript">
function popup(urltobeopen) 
{
 params  = 'width='+screen.width;
 params += ', height='+screen.height;
 params += ', top=0, left=0'
 params += ', fullscreen=yes';

 newwin=window.open(urltobeopen,'windowname', params);
 if (window.focus) {newwin.focus()}
 return false;
}
</script>

<a href="javascript: void(0)" 
   onclick="popup('http://www.phpglossary.com/')">Open a fullscreen popup window</a>

Code for a centered popup window

If we wan to open a new popup window in the center of the screen, then we should have the size of the window and the resolution of the screen. On the basis of available data, we can calculate the values of the top-left corner.

Centered popup window

<script type="text/javascript">

function popup(urltobeopen) 
{
 var width  = 400;
 var height = 300;
 var left   = (screen.width  - width)/2;
 var top    = (screen.height - height)/2;
 var params = 'width='+width+', height='+height;
 params += ', top='+top+', left='+left;
 params += ', resizable=no';
 params += ', location=no';
 params += ', status=no';
 params += ', menubar=no';
 params += ', scrollbars=no';
 params += ', directories=no';
 params += ', toolbar=no';
 newwin=window.open(urltobeopen,'nameofthewindow', params);
 if (window.focus) {newwin.focus()}
 return false;
}
</script>

<a href="javascript: void(0)" 
   onclick="popup('http://www.phpglossary.com/')">Click here to open a centered popup window</a>

About the author

Dinesh Sharma

I have worked on many CMS & Frameworks of PHP & I love to share my knowledge of what I am learning every day.

Add Comment

Click here to post a comment