Window Extensions

Given that the Window object really doesn’t fall completely under any one standard—DOM or JavaScript—and that it is so core to a user’s experience, numerous extensions to the object have been made. Most of these are so new and proprietary that they have yet to be adopted by Web designers at large. This section presents an overview of some of the more useful window extensions made by browser vendors.

IE Window Extensions: Modal, Modeless, and Pop-Up Windows

Internet Explorer supports a few special types of windows. The first is the modal window. Like a standard dialog, this more generic window is modal to the page and must be dismissed before moving on. The basic syntax to create a modal dialog is

window.showModalDialog(URL of dialog, arguments, features);

where

URL of the dialog is a URL to the document to display.
arguments are any objects or values you wish to pass the modal dialog.
features is a semicolon-separated list of display features for the dialog.

A simple example is shown here:

window.showModalDialog("customdialog.htm",window,"dialogHeight: 150px;
 dialogWidth: 300px; center: yes; help: no; resizable: no; status: no;");

The showModalDialog() method also returns a value. This value can be set in the dialog document by setting that document’s window.returnValue property. The return of this value will happen automatically. This feature allows for the simple creation of prompt() and confirm() style dialogs, which must return a value.

A modeless window is very different from a modal dialog. A modeless window always stays in front of the window that it was created from, even when that window gains focus. A common use for this might be to display help or other very contextual useful information. However, while different in function, a modeless window syntactically similar to the modal dialog is Microsoft’s modeless dialog.

windowreference = window.showModelessDialog(URL of dialog, arguments, features)

The method parameters are the same, but the returned value is not a value created within the dialog but instead a reference to the created window in case it should be manipulated at a later time. This would be similar then to the value returned by window.open(). A simple example of the syntax to create a modeless window is shown here:

myWindow = window.showModelessDialog("customdialog.htm",window,"dialogHeight:
 150px; dialogWidth: 300px; center: yes; help: no; resizable: no; status: no;");

The last type of special window form supported by Microsoft is a generic form of pop-up window. Creating a pop-up is very simple—just use the window.createPopup(), which takes no arguments and returns a handle to the newly created window.

var myPopup = window.createPopup();

These windows are initially created, but are hidden. They are later revealed using the pop-up object’s show() method and hidden using hide(), as shown here:

myPopup.show(); // displays created popup
myPopup.hide(); // hides the popup

The value of Microsoft’s special pop-ups may not be obvious until you consider that you have complete control over their appearance, allowing you to even remove the chrome of the displayed window. The authors do not encourage chromeless windows at all, despite the rise of various JavaScript libraries allowing developers to create customized GUI systems. The usability downsides of having unique windows, scrollbars, and other GUI widgets for your site far outweigh the visual value of these widgets—use with caution.

A complete example showing how all these Microsoft-specific windows can be used is shown here:

<<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">>
<<html xmlns="http://www.w3.org/1999/xhtml">>
<<head>>
<<title>>Special IE Windows<</title>>
<<meta http-equiv="content-type" content="text/html; charset=utf-8" />>
<<script type="text/jscript">>
<<!--         
var myPopup = window.createPopup();
function showPopup()
{
    var popupBody = myPopup.document.body;
    popupBody.style.backgroundColor = "#ffff99";
    popupBody.style.border = "solid black 1px";
    popupBody.innerHTML = "Click outside this window to close or press hide
 button.";
    myPopup.show(50, 100, 350, 25, document.body);
}
function makeModalDialog() 
{
 // modal.html has the modal dialog information in it
 showModalDialog("modal.html",window,"status:false;dialogWidth:300px;
dialogHeight:100px;help:no;status:no;");
}

function makeModelessDialog() 
{
 var HTMLoutput = "";
  myModelessDialog = showModelessDialog("blank.htm",window,"status:false;dialogWidth:200px;
dialogHeight:300px;help:no;status:no;");
 modelessBody = myModelessDialog.document.body;
 modelessBody.style.backgroundColor = "#ffcc33"
 
 HTMLoutput += "<<html>><<head>><<title>>Modeless Dialog<</title>><</head>>";
 HTMLoutput += "<<body>><<h1>>Important messages in this modeless window<</h1>><<hr />>";
 HTMLoutput += "<<form>><<div align='center'>><<input type='button' value='close'
 onclick='self.close();' />>";
 HTMLoutput +="<</div>><</form>><</body>><</html>>";

 modelessBody.innerHTML = HTMLoutput;
}
// -->>
<</script>>
<</head>>
<<body>>
<<form name="mainform" id="mainform" action="#" method="get">>
<<input type="button" value="Modal Dialog" onclick="makeModalDialog();" />>
<<input type="button" value="Modeless Dialog" onclick="makeModelessDialog();" />>
<<input type="button" value="Show Popup" onclick="showPopup();" />>
<<input type="button" value="Hide Popup" onclick="myPopup.hide();" />>
<</form>>
<</body>>
<</html>>

Interested readers are encouraged to visit http://msdn.microsoft.com/library for the latest information on Microsoft extensions to the Window object.

Full-Screen Windows

Creating a window that fills up the screen and even removes browser chrome is possible in many browsers. It is possible under 4.x generation browsers and beyond to figure out the current screen size and then create a new window that fits most or all of the available area. In the case of Netscape, you may have difficulty covering the entire window because of the way the height and width of the screen are calculated. However, the script presented here should work to fill up the screen in both browsers.

<<script type="text/javascript">>
<<!--
newwindow=window.open('http://www.yahoo.com','main','height='+screen.height+',
width='+screen.width+',screenX=0,screenY=0,left=0,top=0,resizable=no');
//-->>
<</script>>

The previous “poor man’s” script does keep the browser chrome and may not quite fill up the window. It is possible under 4.x generation browsers to go into a full-screen mode that completely fills the screen. With Internet Explorer it is quite easy, using a JavaScript statement such as

newWindow=window.open('http://www.yahoo.com', 'main','fullscreen=yes');

Some older browsers may need a more complicated script and will even prompt the user if a security privilege should be granted to go full-screen. The fact that older browsers warned users before going full-screen is quite telling, especially once you consider that some users will not know how to get out of full-screen mode. The key combination ALT-F4 should do the trick on a Windows system. However, users may not know this so you should provide a Close button or instructions on how to get out of full-screen mode.