JS 대화 상자_JS 모달 대화 상자 showModalDialog 사용법 요약_javascript 기술

상위 창:

코드 복사 코드는 다음과 같습니다.

>
코드는 다음과 같습니다.

< 스크립트 언어= "javascript" type="text/javascript">function a(){var wname = document.form1.backname.value;parent.window.returnValue=wname ; // 상위 창은 이전 페이지입니다 window.close();}

< ;form name= "form1" action="">







---- 1. 基本语法

---- window对象有一个方法称为showModalDialog ，我们可以在页面按钮的onclick中写如下代码：

< BUTTON onclick="window.showModalDialog
('dialog.htm')" >Search< /BUTTON >

---- 系统会在新窗口中打开dialog.htm页面，并且等待用户响应，如果用户不响应该页面，那么主页面将得不到光标。
---- 在dialog.htm中设置window对象的returnValue属性，就可以让主页面得到返回值。例如，在页面的确定按钮的onclick中写：

window.returnValue = window.
document.all.iptPeopleID.value

---- 将输入框iptPeopleID的值赋给window对象的returnValue属性。在主页面中就可以得到这个值：
var str = showModalDialog ("dialog1.htm")

---- 2. 传递初始化值
---- 如果要向模态页面中传递初始化值，可以在主页面中用如下语句：

var cSearchValue=showModalDialog
('dialog.htm', 'ABC')
在dialog.htm中使用window.dialogArguments
属性可以得到'ABC'。例如：
< SCRIPT FOR=window EVENT=onload LANGUAGE="JScript" >
if (window.dialogArguments != null)
window.document.all.iptPeopleID.value = window.dialogArguments;
< /SCRIPT >

---- 3. 传递多个数值
---- 如果要向模态页面中传递多个参数，可以先在主页面中定义一个对象，

function myDialog() {
var str1;
var str2;
}

---- 显示模态页面之前初始化该对象，然后调用showModalDialog 方法。
function WelcomeYou(iniStr1,iniStr2) {
myDialog.str1 = iniStr1;
myDialog.str2 =iniStr2 ;

if (showModalDialog ("dialog2.htm", myDialog)
==false) //将对象传入
......

---- 在模态页面中，可以用这样的代码
window.document.all.iptID.value=
window.dialogArguments.str1
来引用数值，或者用这样的代码对之赋值
window.dialogArguments.str1 =
window.document.all.iptID.value

---- 完整例程如下：
---- 对于只传递一个参数的情况，见：Main1.htm和dialog1.htm。

---- 对于传递多个参数的情况，见：Main2.htm和dialog2.htm。

父窗体：
dim xxx '返回值
dim yyy '传到子窗体的参数
var xxx = ShowModalDialog ('xxx.asp','yyy','dialogWidth:100px;DialogHeight=290px;status:no')
子窗体：
dim yyy '从父窗体传来的参数
dim xxx '传回父窗体的参数
yyy = window.dialogArguments
xxx = window.returnValue
 

window.dialogArguments的用法

Javascript有许多内建的方法来产生对话框，如：window.alert(),window.confirm(),window.prompt().等。然而IE提供更多的方法支持对话框。如：

showModalDialog()(IE4+支持)
showModelessDialog()(IE5+支持)

window.showModalDialog()方法用来创建一个显示HTML内容的模态对话框，由于是对话框，因此它并没有一般用window.open()打开的窗口的所有属性。
window.showModelessDialog()方法用来创建一个显示HTML内容的非模态对话框。

当我们用showModelessDialog()打开窗口时，不必用window.close()去关闭它，当以非模态方式［IE5］打开时，打开对话框的窗口仍可以进行其他的操作，即对话框不总是最上面的焦点，当打开它的窗口ＵＲＬ改变时，它自动关闭。而模态［ＩＥ４］方式的对话框始终有焦点（焦点不可移走，直到它关闭）。模态对话框和打开它的窗口相联系，因此我们打开另外的窗口时，他们的链接关系依然保存，并且隐藏在活动窗口的下面。

使用方法如下：
vReturnValue=window.showModalDialog(sURL[,vArguments][,sFeatures])
vReturnValue=window.showModelessDialog(sURL[,vArguments][,sFeatures])

매개변수 설명:
sURL
필수 매개변수, 유형: 문자열. 대화 상자에 표시할 문서의 URL을 지정하는 데 사용됩니다.
vArguments
선택적 매개변수, 유형: 변형. 대화 상자에 매개변수를 전달하는 데 사용됩니다. 배열 등을 포함하여 전달되는 매개변수 유형은 제한되지 않습니다. 대화 상자는 window.dialogArguments를 통해 전달된 매개변수를 가져옵니다.
sFeatures
선택적 매개변수, 유형: 문자열. 대화 상자의 모양과 기타 정보를 설명하는 데 사용되며 다음 중 하나 이상을 세미콜론 ";"으로 구분하여 사용할 수 있습니다.
dialogHeight 대화 상자 높이, 100px 이상. IE4의 대화 상자 높이 및 대화 상자 너비의 기본 단위는 em이지만 IE5에서는 시각화의 편의를 위해 모달 대화 상자를 정의할 때 단위를 px로 사용합니다. .
dialogWidth: 대화상자 너비.
dialogLeft: 데스크탑 왼쪽으로부터의 거리입니다.
dialogTop: 데스크탑으로부터의 거리입니다.
center:{yes|no|1|0}: 창이 중앙에 있는지 여부, 기본값은 yes이지만 높이와 너비는 계속 지정할 수 있습니다.
help:{yes|no|1|0}: 도움말 버튼 표시 여부, 기본값은 yes입니다.
resizing:{yes|no|1|0}[ＩＥ5＋]: 크기를 조정할 수 있는지 여부. 기본값은 아니오입니다.
status:{yes|no|1|0}[IE5]: 상태 표시줄을 표시할지 여부. 기본값은 yes[Modeless] 또는 no[Modal]입니다.
scroll:{yes|no|1|0|on|off}: 대화 상자에 스크롤 막대가 표시되는지 여부를 나타냅니다. 기본값은 예입니다.

HTA에는 일반 웹페이지에서는 일반적으로 사용되지 않는 여러 속성이 사용됩니다.
dialogHide:{yes|no|1|0|on|off}: 인쇄 또는 인쇄 미리보기 중에 대화 상자를 숨길지 여부입니다. 기본값은 아니오입니다.
edge:{sunken|raised}: 대화 상자의 테두리 스타일을 지정합니다. 기본값은 증가합니다.
unadorned:{yes|no|1|0|on|off}: 기본값은 no입니다.

매개변수 전달:
매개변수를 대화 상자에 전달하려면 vArguments를 통해 전달됩니다. 유형에는 제한이 없습니다. 문자열 유형의 경우 최대 길이는 4096자입니다. 객체를 전달할 수도 있습니다. 예:

test1.htm
====================
<script><br>varmxh1=newArray(" mxh","net_lover","맹자 장 E")<br>varmxh2=window.open("about:blank","window_mxh")<br>//대화 상자에 배열 전달<br>window.showModalDialog (" test2.htm",mxh1)<br>//창 개체를 대화 상자에 전달<br>window.showModalDialog("test3.htm",mxh2)<br></script>

test2.htm
====================
<script><br>vara=window.dialogArguments <br>alert("전달한 매개변수는 다음과 같습니다: " a)<br></script>

test3.htm
====================
<script><br>vara=window.dialogArguments <br>alert("전달한 매개변수는 창 개체입니다. 이름: " a.name)<br></script>

window.returnValue를 통해 대화상자를 연 창에 정보를 반환할 수 있으며, 물론 객체일 수도 있습니다. 예:

test4.htm
===================
<script><br>vara=window.showModalDialog( "test5.htm")<br>for(i=0;i<a.length;i )alert(a[i])<br></script>

test5.htm
===================
<script><br>functionsendTo()<br> {<br>vara=newArray("a","b")<br>window.returnValue=a<br>window.close()<br>}<br></script>

FAQ:
1. 새 창을 열지 않고 모달 대화 상자에서 제출하는 방법은 무엇입니까?
브라우저가 IE5.5인 경우 대화 상자에서 name 속성과 함께 iframe을 사용할 수 있으며, 제출 시 대상을 iframe의 이름으로 설정할 수 있습니다. IE4의 경우 높이가 0인 프레임을 사용할 수 있습니다. 예:

test6.htm
===================
<script><br>window.showModalDialog("test7 .htm")<br></script>

test7.htm
====================
if(window.location.search)alert(window. 위치 .검색)



< ; /프레임세트>

test8.htm
===================



<script><br>if(window.location.search) Alert(window.location.search)<br></script>
2. http://servername/virtualdirname/test.htm?name=mxh를 통해 매개변수를 대화 상자에 직접 전달할 수 있습니까?
답은 '아니오'입니다. 하지만 프레임에서는 가능합니다.