Modal and Modeless Dialog Boxes: Setting the Window's Size and Location - Doc JavaScript

Modal and Modeless Dialog Boxes

Setting the Window's Size and Location

There are five parameters you can use to impact the size and location of the new window. You can control its height, width, its upper-left corner's x and y offsets relative to the upper-left corner of the desktop, and whether to center the dialog window within the desktop.

The dialogHeight parameter sets the height of the dialog window. Open a window without specifying its height. A default size window opens. Now open a window 200 pixels high. Here is the function call:

window.showModalDialog('4.html','','dialogHeight:200px');

Since the default unit of measure for physical dimensions is not consistent between different versions of Internet Explorer, it is safer to always specify the units. You can use absolute units (cm, mm, in, pt, pc, or px) or relative units (em or ex). You cannot specify a very small window height. The minimum is 100px.

Let's play with the window's width now. To open a window 800 pixels wide and 200 pixels high (try it), you would go:

window.showModalDialog('4.html','',
  'dialogHeight:200px;dialogWidth:800px');

Notice that the window is centered within the desktop. This is the default of the center property. See where the window will open when center is set to no. The possible values of the center property are: yes, no, 1, 0, on, and off. Their semantics are intuitive. This is how we turned off centering of the above window:

window.showModalDialog('4.html','','dialogHeight:200px;
  dialogWidth:800px;center:no');

The window opens close to the upper-left corner of the desktop. You can control the specific location of the window with the dialogLeft and dialogTop parameters. Let's position our window 300 pixels and 500 pixels to left and top, respectively, of the upper-left corner of the desktop:

window.showModalDialog('4.html','','dialogHeight:200px;
  dialogWidth:800px;dialogLeft:300;dialogTop:500')

Even if you do center the window, its position specifications (dialogLeft and dialogTop) override the centering request. Try it:

window.showModalDialog('4.html','',
  'dialogHeight:200px;dialogWidth:800px;
  dialogLeft:300;dialogTop:500';center:yes);

Next: How to impact the dialog box's ornaments

Produced by Yehuda Shiran and Tomer Shiran
All Rights Reserved. Legal Notices.
Created: August 13, 2001
Revised: August 13, 2001

URL: https://www.webreference.com/js/column90/4.html