Showmodeldialog in JS and examples

Source: Internet
Author: User

1.<a href= "#" onclick= "Seepic (' ${list. PATH} ') "><font color=" Blue "> Preview </font></a>&nbsp;<a href=" # "onclick=" Deleteprojectpic ( ${list. SPID}) "><font color=" Blue "> Delete </font></a>

2.<script>
function Seepic (path) {
window.showModalDialog ("/5i5j/picture/newhouse/seeproject_images.jsp? Path= "+path," "," dialogheight:480px; dialogwidth:530px; Status:no; Help:no;resizable:yes; ");
}
</script>

3. Page

<%@ page contenttype= "text/html;charset=gb2312"%>
<%@ page import= "Picture.util.Assistant"%>
<%@ page import= "com. erp5i5j. Entity.Resource.SessionUsers "%>
<%
String host = Assistant.getconfig ("Common", "host");
String Path = host+ "/" +request.getparameter ("PATH");

%>
<base target= "_self"/>
<title> Preview Project Location map Picture </title>
<meta http-equiv= "Content-type" content= "text/html; CHARSET=GBK ">
<link type= "Text/css" rel= "stylesheet" href= ". /.. /css/base.css "/>
<link rel= ' stylesheet ' type= ' text/css ' href= '. /.. /css/uploadify/uploadify.css '/>
<script type= ' Text/javascript ' >
</script>
<body>
<table align=center bgcolor= #E0E0E0 border=0 bordercolor= #232174 bordercolordark= #e5e7ec cellpadding=1 cellspacing =0>
<tr rowspan= "7" >
&LT;TD align= "center" >
<div align= "center" >

</div>
</td>
</tr>
</table>
</body>


4.showModalDialog explanation

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

<title></title>
<script language= "javascript" type= "Text/javascript" >
function getarguments () {
var obj = window.dialogarguments
Alert ("You passed the parameter:" + obj.value)
}

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>

Showmodeldialog in JS and examples

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.