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-296797.hostingersite.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.
<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-296797.hostingersite.com/')">Click here to open a centered popup window</a>