js 모달 창 사용 소개(모달 대화 상자 및 비모달 대화 상자)_기본 지식

자바스크립트는 모달 대화 상자와 비모드 대화 상자로 구분됩니다. 실제로 둘의 차이점은 대화 상자가 닫히기 전에 사용자가 같은 페이지의 다른 곳에서 작업할 수 있는지 여부입니다. 예를 들어, "파일 열기" 대화 상자는 일반적인 모달 대화 상자입니다. 이 대화 상자에서 작업을 수행할 때만 대화 상자를 여는 프로그램에서 다른 작업을 수행할 수 있습니다. 비모달 대화 상자에는 필요하지 않습니다. .

모달 대화상자: showModalDialog
모덜리스 대화상자: showModelessDialog

vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])

반환 값: vReturnValue, 물론 반환 값은 대화 상자에서 반환됩니다.
sURL: 필수, 열려는 페이지

v인수--

선택적 매개변수, 유형: 변형. 대화 상자에 매개변수를 전달하는 데 사용됩니다. 배열 등을 포함하여 전달되는 매개변수 유형은 제한되지 않습니다. 대화 상자는 window.dialogArguments를 통해 전달된 매개변수를 가져옵니다.
기능--
선택적 매개변수, 유형: 문자열. 대화 상자의 모양과 기타 정보를 설명하는 데 사용되며 다음 중 하나 이상을 세미콜론 ";"으로 구분하여 사용할 수 있습니다.
1.dialogHeight: 대화 상자의 높이(100px 이상) IE4의 대화 상자 높이 및 대화 상자 너비의 기본 단위는 em이지만 IE5에서는 편의상 모달 대화 상자를 정의할 때 단위를 px로 사용합니다. .
2.dialogWidth: 대화 상자 너비.
3.dialogLeft: 화면 왼쪽으로부터의 거리입니다.
4.dialogTop: 화면으로부터의 거리입니다.
5.center: {yes | no | 1 | 0}: 창이 중앙에 있는지 여부, 기본값은 yes이지만 높이와 너비는 계속 지정할 수 있습니다.
6.help: {yes | no | 0}: 도움말 버튼을 표시할지 여부, 기본값은 yes입니다.
7.ressible: {예 | 아니오 | 0} [IE5+]: 크기를 조정할 수 있는지 여부입니다. 기본값은 아니오입니다.
8.status: {yes | no | 0} [IE5]: 상태 표시줄을 표시할지 여부입니다. 기본값은 yes[Modal] 또는 no[Modal]입니다.
9.scroll:{ yes | no | 0 | on off }: 대화 상자에 스크롤 막대가 표시되는지 여부를 나타냅니다. 기본값은 예입니다.
다음 속성은 HTA에서 사용되며 일반적으로 일반 웹 페이지에서는 사용되지 않습니다.
10.dialogHide:{ yes | no | 1 | 0 | off }: 인쇄 또는 인쇄 미리보기 중에 대화 상자를 숨길지 여부입니다. 기본값은 아니오입니다.
11.edge:{ sunken | raise }: 대화 상자의 테두리 스타일을 지정합니다. 기본값은 증가합니다.
12.unadorned:{ 예 | 아니요 | 0 | 끄기 }: 기본값은 아니요입니다.

매개변수 전달:

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

<script> 
var obj = new Object(); 
obj.name="51js"; 
window.showModalDialog("modal.htm",obj,"dialogWidth=200px;dialogHeight=100px"); 
</script>

modal.htm

<script> 
var obj = window.dialogArguments 
alert("您传递的参数为：" + obj.name) 
</script>

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

<script> 
str =window.showModalDialog("modal.htm",,"dialogWidth=200px;dialogHeight=100px"); 
alert(str); 
</script>

modal.htm

<script> 
window.returnValue="http://www.51js.com"; 
</script>

window.showModalDialog 또는 window.showModelessDialog를 사용하여 모달 창을 연 후 상위 창과 몇 가지 상호 작용 문제가 있습니다.
대화형 작업의 전제 조건은 showModalDialog 또는 showModelessDialog 메서드를 호출할 때 다음과 같은 두 번째 매개 변수가 창에 전달된다는 것입니다.
window.showModelessDialog('filename.htm',window,'dialogWidth=200px;dialogHeight=250px;')
다음으로 자주 사용되는 부모 창의 일부 데이터와 메서드를 얻는 것입니다. 부모 창은 일반적으로 returnValue
를 통해 자식 창의 매개 변수를 얻을 수 있습니다.

//取得父窗口的JS变量 var 
window.dialogArguments.var; 
//获得父窗口的对象和属性 
window.dialogArguments.form1.name.value ; 
//调用父窗口的方法 fun
window.dialogArguments.fun() ;