The window.showModalDialog () method is used to create a modal dialog box that displays HTML content.
The Window.showmodelessdialog () method is used to create a non-modal dialog box that displays HTML content.
How to use:
Vreturnvalue = window.showModalDialog (sURL [, varguments] [, Sfeatures])
Vreturnvalue = Window.showmodelessdialog (sURL [, varguments] [, Sfeatures])
Parameter description:
surl--required parameter, type: String. Used to specify the URL of the document to be displayed by the dialog box.
varguments--optional parameter, type: Variant. Used to pass parameters to the dialog box. There are no limits on the types of arguments passed, including arrays. The dialog box uses window.dialogarguments to get the arguments passed in.
sfeatures--optional parameter, type: String. Used to describe the appearance of the dialog box and other information, you can use the following one or several, with a semicolon ";" Separated.
1.dialogHeight: Dialog height, not less than 100px,ie4 in dialogheight and dialogwidth the default unit is EM, and IE5 above is PX, for the convenience of its see, in the definition of modal Mode dialog box, use PX to do the unit.
2.dialogWidth: Width of the dialog box.
3.dialogLeft: The distance from the left of the screen.
4.dialogTop: Distance from the screen.
5.center: {yes | no | 1 | 0}: The window is centered, the default is yes, but you can still specify the height and width.
6.help: {yes | no | 1 | 0}: Whether the Help button is displayed, default yes.
7.resizable: {yes | no | 1 | 0}(IE5+): Whether the size can be changed. Default No.
8.status: {yes | no | 1 | 0}(IE5+): Whether the status bar is displayed. Default is yes[Modeless] or no[modal].
9.scroll:{Yes | no | 1 | 0 | on | off}: Indicates whether the dialog box displays a scroll bar. The default is yes.
The following properties are used in an HTA and are generally not used in general Web pages.
10.dialoghide:{Yes | no | 1 | 0 | on | off}: Whether the dialog box is hidden when printing or printing preview. The default is No.
11.edge:{Sunken | raised}: Indicates the border style of the dialog box. The default is raised.
12.unadorned:{Yes | no | 1 | 0 | on | off}: default is No.
Parameter passing:
1. To pass a parameter to a dialog box, pass it through varguments. Type is not limited, for string types, the maximum is 4,096 characters. You can also pass objects, for example:
-------------------------------
Parent.htm
<script>
var obj = new Object ();
Obj.name= "I5TT";
window.showModalDialog ("modal.htm", obj, "dialogwidth=200px;dialogheight=100px");
</script>
Modal.htm
<script>
var obj = window.dialogarguments
Alert ("You passed the parameter:" + obj.name)
</script>
-------------------------------
2. You can return information by Window.returnvalue to the window that opens the dialog box, or it can be an object. For example:
------------------------------
Parent.htm
<script>
Str =window.showmodaldialog ("modal.htm",, "dialogwidth=200px;dialogheight=100px");
alert (str);
</script>
Modal.htm
<script>
Window.returnvalue= "http://www.i5tt.com/";
</script>
An instance of combining parameter passing with the returned result
Parentpage.aspx
<title></title>
<script language= "JavaScript" type= "Text/javascript" >
function Openwindow () {
var obj = new Object ();
Obj.value = "3";
Obj.name = "4";
Obj.sew = "5";
Str =window.showmodaldialog ("childpage.aspx", obj, "dialogwidth=200px;dialogheight=100px");
alert (str);
}
function Openmodelessdialog () {
var obj = new Object ();
obj.value = "3";
obj.name = "4";
Obj.sew = "5";
str = Window.showmodelessdialog (" Childpage.aspx ", obj," dialogwidth=200px;dialogheight=100px ");
alert (str);
}
</script>
<body>
<form id= "Form1" runat= "Server" >
<div>
<input type= "button" id= "Btnopen" value= "open modal Window" onclick= "Openwindow ();"/>
<input type= "button" id= "Button1" value= "open the Non-modal window" onclick= "Openmodelessdialog ();"/>
</div>
</form>
</body>
Childpage.aspx
function Windowclose () {
Window.returnvalue = "Childpage.close";
}
</script>
<body onunload= "Windowclose (); >
<form id= "Form1" runat= "Server" >
<div>
<input type= "button" id= "Btnopen" value= "open Window" onclick= "getarguments ();"/>
<input type= "button" id= "Btnclose" value= "close Window" onclick= ' Self.close (); '/>
</div>
</form>
</body>
Open function Parameter descriptionwindow.open(urlnamefeaturesreplace);
Name is used to set the names of pop-up forms, and if you use an existing form or frame name as your name parameter, URL URLs will be loaded on this form or frame page
For example:
<ahref="http://www.dreamdu.com/"target="dreamdu">使用HTML连接建立一个页面</a><ahref="#"onclick="window.open(‘http://www.dreamdu.com/xhtml/‘,‘dreamdu‘);">使用JavaScript在上面已经建立连接的页面载入HTML教程</a>
First use the normal HTML link to open a page (target named Dreamdu), and then use the Open function to open another page, the browser first to find out if there is a form named Dreamdu, if so, in this form loading the dream of HTML tutorial URL. Otherwise create a new form called DREAMDU and load the Dream capital HTML tutorial URL
The Open function opens the form by default for the _blank pop-up method of target, so the page opens in a popup way
Open function Features parameter descriptionIf you do not use the third argument, a new normal window opens
| parameter name | type | description |
|---|---|---|
| height | number | set the height of the form, not less than |
| left | number | description to create a form with an lvalue that cannot be negative |
| boolean the | form displays the address bar, the default value is no | |
| resizable | Boolean | form allows resizing by dragging edges Small, default is no |
| scrollable | Boolean | form is allowed to drag when outside the window visible range, default is no |
| toolbar | Boolean | form displays a toolbar with a default value of no |
| Top | number | description Create the top coordinate of the form, cannot be negative |
| status | Boolean | form displays status bar, default value no |
| width | number | create a form with a width that cannot be less than. |
Each attribute in the attribute string is separated by commas, and no spaces are allowed between each attribute
The return value of the Open functionThe newly created Window object
Monkey tip: Pop-up forms are not recommended, HTML pop-up forms
Examplewindow.open("http://www.dreamdu.com/""dreamduwin""width=500,height=300,left=10,top=20,location=yes,status=yes");
Create a new 500-pixel width, a height of 300 pixels, a horizontal offset of 10 pixels from the upper-left corner of the screen, a vertical offset of 20 pixels, and a form with the address bar and status bar
varoWin=window.open("http://www.dreamdu.com/","dreamduwin");oWin.resizeTo(800,600);//重新设置窗体大小oWin.moveTo(50,50);//移动窗体oWin.close();//关闭窗体
The Window.Open function returns a Window object that creates a new form after the form is created, which allows you to control the form (move, change size, close)
JavaScript Opener Number Example<inputtype="button"value="在新窗口中打开梦之都！"onclick="window.open(‘http://www.dreamdu.com/‘, ‘dreamduwin‘, ‘width=500,height=300,left=10,top=20,location=yes,status=yes‘);"/>
<script type= "Text/javascript" >function f4 () {open ("ab.html", "_blank", "width=500,height=300,");} </script><input type= "button" value= "F6" onclick= "F6 ()" ><div id= "DDV" ></div>
<script type= "Text/javascript" >function F10 () {opener.f5 ();} function F9 () {opener.document.getElementById ("DDV"). Innerhtml= "Gaile";} </script><input type= "button" value= "Gai" onclick= "F9 ()" ><input type= "button" value= "Gai" onclick= " F10 () ">
JS in window.showModalDialog () detailed HTML DOM open () method
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
