<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML xmlns:MSHelp=http://msdn.microsoft.com/msHelp>
<HEAD>
<TITLE>showModalDialog Method</TITLE>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html; CHARSET=iso-8859-1">
<META NAME="AUTHOR" CONTENT="InetSDK">
<META NAME="MS.LOCALE" CONTENT="EN-US">
<META NAME="ROBOTS" CONTENT="noindex">
<SCRIPT>
function fnRandom(iModifier){
return parseInt(Math.random()*iModifier);
}
function fnSetValues(){
var iHeight=oForm.oHeight.options[oForm.oHeight.selectedIndex].text;
if(iHeight.indexOf("Random")>-1){
iHeight=fnRandom(document.body.clientHeight);
}
var iWidth=oForm.oWidth.options[oForm.oWidth.selectedIndex].text;
if(iWidth.indexOf("Random")>-1){
iWidth=fnRandom(document.body.clientWidth);
}
var iTop=oForm.oTop.options[oForm.oTop.selectedIndex].text;
if(iTop.indexOf("Random")>-1){
iTop=fnRandom(screen.height);
}
var iLeft=oForm.oLeft.options[oForm.oLeft.selectedIndex].text;
if(iLeft.indexOf("Random")>-1){
iLeft=fnRandom(screen.width);
}
    var sEdge=oForm.oEdge.options[oForm.oEdge.selectedIndex].text;
var bCenter=oForm.oCenter.options[oForm.oCenter.selectedIndex].text;
var bHelp=oForm.oHelp.options[oForm.oHelp.selectedIndex].text;
var bResize=oForm.oResize.options[oForm.oResize.selectedIndex].text;
var bStatus=oForm.oStatus.options[oForm.oStatus.selectedIndex].text;

var sFeatures="dialogHeight: " + iHeight + "px; dialogWidth: " + iWidth + "px; dialogTop: " + iTop + "px; dialogLeft: " + iLeft + "px; edge: " + sEdge + "; center: " + bCenter + "; help: " + bHelp + "; resizable: " + bResize + "; status: " + bStatus + ";";

return sFeatures;
}
function fnOpen(){
/* The  method constructor looks like:
showModalDialog(
sURL="The page that is opened"
sArguments="Extra values or object references"
sFeatures="features of the window";

)
*/
var sFeatures=fnSetValues();
oFeatures.innerHTML='window.showModalDialog("SMD_target.htm","' + oForm.oArguments.value + '","' + sFeatures + '");';
window.showModalDialog("SMD_target.htm", oForm.oArguments.value, sFeatures)
}
</SCRIPT><!-- SAMPLE_STYLE_START -->
<LINK REL="stylesheet" HREF="/workshop/basicSDKIE4.css" 
TYPE="text/css">
<!-- SAMPLE_STYLE_END -->
<LINK REL="stylesheet" TYPE="text/css" HREF="ms-help://Hx/HxRuntime/HxLink.css"><STYLE TYPE="text/css">
PRE.clsCode { font-size:110%; } 
PRE.clsSyntax { font-size:100%; }  
TD DIV.clsBeta { display:none;}
  MSHelp\:link {
    color:#0000ff;
    text-decoration:underline;
    cursor:hand;
    hoverColor:#3366ff;
    filterString: ;}
</STYLE>
</HEAD>
<!--TOOLBAR_START-->
<!--TOOLBAR_EXEMPT-->
<!--TOOLBAR_END--><BODY TOPMARGIN=0 LEFTMARGIN=0 BGPROPERTIES="FIXED" BGCOLOR="#FFFFFF" 
LINK="#000000" VLINK="#808080" ALINK="#000000">
<BLOCKQUOTE CLASS="body"><H1>showModalDialog Method</H1>
<P>This sample demonstrates the use of the <b>showModalDialog</b> method.  Select the possible values for the supported parameters to adjust how the modal dialog box is displayed.  Click the Push To Create button to open the modal dialog box based upon the selected values. 
The method syntax used to open the window is displayed at the bottom of the page when the dialog box is opened.</P><FORM NAME="oForm">
<FIELDSET><LEGEND><b>showModalDialog Method Options</b></LEGEND>
<TABLE>
<TR><TD><LABEL FOR=dHeight>Dialog Box Height (Integer)</LABEL></TD><TD><SELECT ID="dHeight" NAME=oHeight><OPTION>-- Random --<OPTION>150<OPTION>200<OPTION>250<OPTION>300<OPTION>400<OPTION>500</SELECT></TD></TR>
<TR><TD><LABEL FOR=dWidth>Dialog Box Width (Integer)</LABEL></TD><TD><SELECT ID="dWidth" NAME=oWidth><OPTION>-- Random --<OPTION>150<OPTION>200<OPTION>250<OPTION>300<OPTION>400<OPTION>500</SELECT></TD></TR>
<TR><TD><LABEL FOR=dTop>Dialog Box Top (Integer)</LABEL></TD><TD><SELECT ID="dTop" NAME=oTop><OPTION>-- Random --<OPTION>150<OPTION>200<OPTION>250<OPTION>300<OPTION>400<OPTION>500<OPTION></SELECT></TD></TR>
<TR><TD><LABEL FOR=dLeft>Dialog Box Left (Integer)</LABEL></TD><TD><SELECT ID="dLeft" NAME=oLeft><OPTION>-- Random --<OPTION>150<OPTION>200<OPTION>250<OPTION>300<OPTION>400<OPTION>500<OPTION></SELECT></TD></TR>
<TR><TD><LABEL FOR=dCenter>Dialog Box Center (Boolean / TOP and LEFT must be set to an empty value [last option])</LABEL></TD><TD><SELECT ID="dCenter" NAME=oCenter><OPTION>Yes<OPTION>No</SELECT></TD></TR>
<TR><TD><LABEL FOR=dEdge>Dialog Box Edge (String)</LABEL></TD><TD><SELECT ID="dEdge" NAME=oEdge><OPTION>Raised<OPTION>Sunken</SELECT></TD></TR>
<TR><TD><LABEL FOR=dHelp>Dialog Box Help (Boolean)</LABEL></TD><TD><SELECT ID="dHelp" NAME=oHelp><OPTION>Yes<OPTION>No</SELECT></TD></TR>
<TR><TD><LABEL FOR=dResize>Dialog Box Resizable (Boolean)*</LABEL></TD><TD><SELECT ID="dResize" NAME=oResize><OPTION>Yes<OPTION>No</SELECT></TD></TR>
<TR><TD><LABEL FOR=dStatus>Dialog Box Status (Boolean)*</LABEL></TD><TD><SELECT ID="dStatus" NAME=oStatus><OPTION>Yes<OPTION>No</SELECT></TD></TR>
<TR><TD><LABEL FOR=dArguments>Dialog Box Arguments (Text or object reference)</LABEL></TD><TD><INPUT TYPE=text NAME=oArguments ID="dArguments" VALUE="Dialog Arguments Value"></TD></TR>
<TR><TD><LABEL FOR=dCommand>Create Modal Dialog Box</LABEL></TD><TD><INPUT ID="dCommand" NAME=oCommand TYPE=button VALUE="Push To Create" onclick="fnOpen()"></TD></TR>
<TR><TD><b>Method Syntax Used:</b></TD><TD ID=oFeatures></TD></TR>
<TR><TD><b>Notes:</b></TD><TD>* Available as of Internet Explorer 5 or later.</TD></TR>
</TABLE>
</FORM><!-- START_PAGE_FOOTER -->
<BR><BR><BR>
<MSHelp:link xmlns:MSHelp="http://msdn.microsoft.com/mshelp" keywords="msdn_copyright" TABINDEX="0">&copy; 2003 Microsoft Corporation. All rights reserved.</MSHelp:link>.
<!-- END_PAGE_FOOTER -->
</BLOCKQUOTE>
</BODY>
</HTML>

解决方案 »

  1.   

    showModalDialog Method--------------------------------------------------------------------------------Creates a modal dialog box that displays the specified HTML document.SyntaxvReturnValue = window.showModalDialog(sURL [, vArguments] [, sFeatures])
    ParameterssURL Required. String that specifies the URL of the document to load and display. 
    vArguments Optional. Variant that specifies the arguments to use when displaying the document. Use this parameter to pass a value of any type, including an array of values. The dialog box can extract the values passed by the caller from the dialogArguments property of the window object. 
    sFeatures Optional. String that specifies the window ornaments for the dialog box, using one or more of the following semicolon-delimited values: dialogHeight:sHeight Sets the height of the dialog window (see Res for default unit of measure). 
    dialogLeft:sXPos Sets the left position of the dialog window relative to the upper-left corner of the desktop. 
    dialogTop:sYPos Sets the top position of the dialog window relative to the upper-left corner of the desktop. 
    dialogWidth:sWidth Sets the width of the dialog window (see Res for default unit of measure). 
    center:{ yes | no | 1 | 0 | on | off } Specifies whether to center the dialog window within the desktop. The default is yes. 
    dialogHide:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window is hidden when printing or using print preview. This feature is only available when a dialog box is opened from a trusted application. The default is no. 
    edge:{ sunken | raised } Specifies the edge style of the dialog window. The default is raised. 
    help:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays the context-sensitive Help icon. The default is yes. 
    resizable:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window has fixed dimensions. The default is no. 
    scroll:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays scrollbars. The default is yes. 
    status:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays a status bar. The default is yes for untrusted dialog windows and no for trusted dialog windows. 
    unadorned:{ yes | no | 1 | 0 | on | off } Specifies whether the dialog window displays the border window chrome. This feature is only available when a dialog box is opened from a trusted application. The default is no. 
     Return ValueVariant. Returns the value of the returnValue property as set by the window of the document specified in sURL .
      

  2.   

    window.showModalDialog("showModalDialog_target.htm", "", 
          "")
      

  3.   

    <HTML>
    <HEAD>
    <TITLE>window.setModalDialog() Method</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    var currPrefs = new Array()
    function getPrefsData() {
    var prefs = showModalDialog("2.htm", currPrefs, 
    "dialogWidth:400px; dialogHeight:300px")
    if (prefs) {
    if (prefs["name"]) {
    document.all.firstName.innerText = prefs["name"]
    currPrefs["name"] = prefs["name"]
    }
    if (prefs["bgColor"]) {
    document.body.style.backgroundColor = prefs["bgColor"]
    currPrefs["bgColor"] = prefs["bgColor"]
    }
    if (prefs["textColor"]) {
    document.body.style.color = prefs["textColor"]
    currPrefs["textColor"] = prefs["textColor"]
    }
    if (prefs["h1Size"]) {
    document.all.welcomeHeader.style.fontSize = prefs["h1Size"]
    currPrefs["h1Size"] = prefs["h1Size"]
    }
    }
    }
    function init() {
    document.all.firstName.innerText = "friend"
    }
    </SCRIPT></HEAD>
    <BODY BGCOLOR="#eeeeee" STYLE="margin:20px" onLoad="init()">
    <H1>window.setModalDialog() Method</H1>
    <HR>
    <H2 ID="welcomeHeader">Welcome, <SPAN ID="firstName">&nbsp;</SPAN>!</H2>
    <HR>
    <P>Use this button to set style preferences for this page:
    <BUTTON ID="prefsButton" onClick="getPrefsData()">
    Preferences
    </BUTTON>
    </BODY>
    </HTML>2.htm:
    <HTML>
    <HEAD>
    <TITLE>User Preferences</TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    // Close the dialog
    function closeme() {
    window.close()
    }// Handle click of OK button
    function handleOK() {
    window.returnValue = getFormData()
    closeme()
    }// Handle click of Cancel button
    function handleCancel() {
    window.returnValue = ""
    closeme()
    }
    // Generic function converts form element name-value pairs
    // into an array
    function getFormData() {
    var form = document.prefs
    var returnedData = new Array()
    // Harvest values for each type of form element
    for (var i = 0; i < form.elements.length; i++) {
    if (form.elements[i].type == "text") {
    returnedData[form.elements[i].name] = form.elements[i].value
    } else if (form.elements[i].type.indexOf("select") != -1) {
    returnedData[form.elements[i].name] = form.elements[i].options[form.elements[i].selectedIndex].value
    } else if (form.elements[i].type == "radio") {
    returnedData[form.elements[i].name] = form.elements[i].value
    } else if (form.elements[i].type == "checkbox") {
    returnedData[form.elements[i].name] = form.elements[i].value
    } else continue
    }
    return returnedData
    }
    // Initialize by setting form elements from passed data
    function init() {
    if (window.dialogArguments) {
    var args = window.dialogArguments
    var form = document.prefs
    if (args["name"]) {
    form.name.value = args["name"]
    }
    if (args["bgColor"]) {
    setSelected(form.bgColor, args["bgColor"])
    }
    if (args["textColor"]) {
    setSelected(form.textColor, args["textColor"])
    }
    if (args["h1Size"]) {
    setSelected(form.h1Size, args["h1Size"])
    }
    }
    }
    // Utility function to set a SELECT element to one value
    function setSelected(select, value) {
    for (var i = 0; i < select.options.length; i++) {
    if (select.options[i].value == value) {
    select.selectedIndex = i
    break
    }
    }
    return
    }
    // Utility function to accept a press of the
    // Enter key in the text field as a click of OK
    function checkEnter() {
    if (window.event.keyCode == 13) {
    handleOK()
    }
    }
    </SCRIPT>
    </HEAD><BODY BGCOLOR="#eeeeee" onLoad="init()">
    <H2>Web Site Preferences</H2>
    <HR>
    <TABLE BORDER=0 CELLSPACING=2>
    <FORM NAME="prefs" onSubmit="return false">
    <TR>
    <TD>Enter your first name:<INPUT NAME="name" TYPE="text" VALUE="" SIZE=20 onKeyDown="checkEnter()">
    </TR><TR>
    <TD>Select a background color:
    <SELECT NAME="bgColor">
    <OPTION VALUE="beige">Beige
    <OPTION VALUE="antiquewhite">Antique White
    <OPTION VALUE="goldenrod">Goldenrod
    <OPTION VALUE="lime">Lime
    <OPTION VALUE="powderblue">Powder Blue
    <OPTION VALUE="slategray">Slate Gray
    </SELECT>
    </TR><TR>
    <TD>Select a text color:
    <SELECT NAME="textColor">
    <OPTION VALUE="black">Black
    <OPTION VALUE="white">White
    <OPTION VALUE="navy">Navy Blue
    <OPTION VALUE="darkorange">Dark Orange
    <OPTION VALUE="seagreen">Sea Green
    <OPTION VALUE="teal">Teal
    </SELECT>
    </TR><TR>
    <TD>Select "Welcome" heading font point size:
    <SELECT NAME="h1Size">
    <OPTION VALUE="12">12
    <OPTION VALUE="14">14
    <OPTION VALUE="18">18
    <OPTION VALUE="24">24
    <OPTION VALUE="32">32
    <OPTION VALUE="48">48
    </SELECT>
    </TR>
    </TABLE>
    </FORM>
    <DIV STYLE="position:absolute; left:200px; top:220px">
    <BUTTON STYLE="width:80px" onClick="handleOK()">OK</BUTTON>&nbsp;&nbsp;
    <BUTTON STYLE="width:80px" onClick="handleCancel()">Cancel</BUTTON>
    </DIV>
    </BODY>
    </HTML>
      

  4.   

    index.htm:<script language="javascript">
    function popdialog(url,swidth,sheight){
    if (swidth=="") swidth = "280";
    if (sheight=="") swidth = "180";
    var sValue = showModalDialog(url,"","dialogWidth:" + swidth + ";status:no;dialogHeight:" + sheight);
    return sValue;
    }
    </script><script language="vbscript">
    function fun_xzry()
    dim rst
    rst = popdialog("modal.htm","300px","300px")
    if rst <> "" then
       form1.test.value = "&Auml;&atilde;&Ntilde;&iexcl;&Ocirc;&ntilde;&Aacute;&Euml;" & rst
    end if
    end function
    </script>
    <body>
    <form name="form1" id="form_add" method="post">
    <input onclick="vbscript:fun_xzry()" type="text" class="inputreadonly" name="test" readonly value="请选择">  
    </form>
    </body>
    --------------------------------------------------------------------------------
    modal.htm:
    <form method="POST" id="form1" name="formSV" >  
    <select id="select1" name="select2" size="5" style="height: 180; width: 150" ondblclick="javascript:select_ok();">
    <option value='111'>111</option>
    <option value='222'>222</option>
    <option value='333'>333</option>
    </select>
    </form><input type="button" name="btn_ok" value="&Egrave;·&para;¨" class="button" onclick="javascript:select_ok();">
            <input type="button" name="btn_cancel" value="&sup1;&Oslash;±&Otilde;" class="button" onclick="javascript:window.close();">
    <script language="javascript">
    function select_ok(){

    var svalue = document.form1.select1.value;
    if (svalue != "") {
    //alert(svalue);
    window.returnValue = svalue;
    window.close();
    }else{
    alert("&Ccedil;&euml;&Ntilde;&iexcl;&Ocirc;&ntilde;!");
    return;
    }
    }</script>