User Tools

Site Tools


web_sites:creating_pop-up_windows_by_using_html_and_javascript

Web Sites - Creating pop-up windows by using HTML and JavaScript

Create a small pop-up windows, and put it on the center of screen.

<script language="JavaScript">
/*
 * Open centered pop-up window
 *
 * @param URL - specifies the URL of the page to open.  If no URL is specified, a new window with **about:blank** will be opened.
 * @param windowName - specifies the target attribute or the name of the window (_blank, _parent, _self, _top, name).
 * @param windowWidth - the window width in pixels (integer).
 * @param windowHeight - the window height in pixels (integer).
*/
 
function popUpWindow(URL, windowName, windowWidth, windowHeight) 
{
  var centerLeft = (screen.width/2)-(windowWidth/2);
  var centerTop = (screen.height/2)-(windowHeight/2);
  var windowFeatures = 'toolbar=no, location=no, directories=no, status=no, menubar=no, titlebar=no, scrollbars=no, resizable=no, ';
  return window.open(URL, windowName, windowFeatures +' width='+ windowWidth +', height='+ windowHeight +', top='+ centerTop +', left='+ centerLeft);
}
</script>
FeatureDescription
directories=yes|no|1|0Obsolete. Whether or not to add directory buttons. Default is yes. IE only.
height=pixelsThe height of the window. Minimum value is 100.
left=pixelsThe left position of the window. Negative values not allowed.
location=yes|no|1|0Whether or not to display the address field. Opera only.
menubar=yes|no|1|0Whether or not to display the menu bar.
resizable=yes|no|1|0Whether or not the window is resizable. IE only.
scrollbars=yes|no|1|0Whether or not to display scroll bars. IE, Firefox & Opera only.
status=yes|no|1|0Whether or not to add a status bar.
titlebar=yes|no|1|0Whether or not to display the title bar. Ignored unless the calling application is an HTML Application or a trusted dialog box.
toolbar=yes|no|1|0Whether or not to display the browser toolbar. IE and Firefox only.

<a onclick="popUpWindow('http://www.sharewiz.net', 'Title', '500', '400');" href="javascript:void(0);">CLICK TO OPEN POP-UP</a>
 
<a href="javascript:popUpWindow('http://www.sharewiz.net','Title','500','400')">CLICK TO OPEN POP-UP</a>

Replace Title with name of the window (_blank, _parent, _self, _top, name).

Set the Width and Height of the popup as required.

NOTE: This function does not work on a dual monitor setup.

web_sites/creating_pop-up_windows_by_using_html_and_javascript.txt · Last modified: 2020/07/15 09:30 by 127.0.0.1

Donate Powered by PHP Valid HTML5 Valid CSS Driven by DokuWiki