<html>
<head>
<title>Abakada HTML Demo: showModalDialog Method</title>
<link rel="stylesheet" href="/shared/netdemos.css">
<script language="JavaScript">
<!--
function openModal ( opt ) {
event.srcElement.blur ( );
if ( opt == "width" )
window.showModalDialog ( "modal.aspx","#9cc","dialogWidth: 10cm; dialogHeight: 7cm; status: 0" );
if ( opt == "height" )
window.showModalDialog ( "modal.aspx","#c96","dialogWidth: 6.5cm; dialogHeight: 10cm; dialogTop: 3cm; dialogLeft: 10cm; status: 0" );
if ( opt == "top" )
window.showModalDialog ( "modal.aspx","#cc9","dialogWidth: 7.5cm; dialogHeight: 7.5cm; dialogTop: 4cm; dialogLeft: 0cm; status: 0" );
if ( opt == "left" )
window.showModalDialog ( "modal.aspx","#ccc","dialogWidth: 7.5cm; dialogHeight: 7.5cm; dialogTop: 0cm; dialogLeft: 9.5cm; status: 0" );
}
//-->
</script>
</head>
<body>
<!-- #include virtual="~/shared/top.inc" -->
<div class="header"><h2>Abakada HTML Demo: showModalDialog Method</h2></div>
<hr size=1 width=92%>
<center>
<p>This example demonstrates the <b>showModalDialog</b> method to open a modal window, using the <b>dialogWidth</b>, <b>dialogHeight</b>, <b>dialogTop</b>, and <b>dialogLeft</b> properties to specify the size and position of the window. </p>
<p>The below select box's <b>onchange</b> event triggers a script that creates a modal dialog showing the effect of setting the different properties. </p>
<p><select onchange="openModal ( value )"></td></tr>
<option>Select Property</option></td></tr>
<option value="width">dialogWidth</option></td></tr>
<option value="height">dialogHeight</option></td></tr>
<option value="top">dialogTop</option></td></tr>
<option value="left">dialogLeft</option></td></tr>
</select></p>
</center>
<hr size=1 width=92%>
<!-- #include virtual="~/shared/viewsrc.inc" -->
</body>
</html>