showModelessDialog()_javascript 스킬 사용에 대한 자세한 설명

Javascript에는 window.alert(), window.confirm(), window.prompt() 등과 같은 대화 상자를 생성하는 많은 내장 메소드가 있습니다. 그러나 IE는 대화 상자를 지원하는 더 많은 방법을 제공합니다. 예:

showModalDialog()(IE 4 지원)
showModelessDialog()(IE 5 지원)

window.showModalDialog() 메서드는 다음을 표시하는 모달 대화 상자를 만드는 데 사용됩니다. HTML 내용 대화 상자이기 때문에 일반적으로 window.open()으로 열리는 창의 속성을 모두 갖고 있지는 않습니다.

window.showModelessDialog() 메서드는 HTML 콘텐츠를 표시하는 비모달 대화 상자를 만드는 데 사용됩니다.

showModelessDialog()를 사용하여 창을 열 때 창을 닫을 때 window.close()를 사용할 필요가 없습니다. 비모달 모드[IE5]에서 열리면 열리는 창이 됩니다. 대화 상자는 여전히 다른 작업을 수행할 수 있습니다. 즉, 대화 상자가 항상 최상위 초점이 되는 것은 아니며 대화 상자를 여는 창의 URL이 변경되면 자동으로 닫힙니다. 모달 [IE4] 대화 상자에는 항상 초점이 있습니다(닫을 때까지 초점을 제거할 수 없습니다). 모달 대화 상자는 그것을 열었던 창에 연결되어 있으므로 다른 창을 열 때 해당 링크 관계는 여전히 유지되고 활성 창 아래에 숨겨집니다.

사용 방법은 다음과 같습니다.
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이지만 높이와 너비는 계속 지정할 수 있습니다.
도움말: {yes | no | 0}: 도움말 버튼 표시 여부, 기본값은 yes입니다.
크기 조정 가능: {예 | 아니오 1 | 0} [IE5+]: 크기를 조정할 수 있는지 여부. 기본값은 아니오입니다.
status: {yes | no | 0} [IE5]: 상태 표시줄을 표시할지 여부입니다. 기본값은 yes[Modeless] 또는 no[Modal]입니다.
스크롤:{ 예 | 아니오 | 0 | off }: 대화 상자에 스크롤 막대가 표시되는지 여부를 나타냅니다. 기본값은 예입니다.

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

수신 매개변수:
매개변수를 대화 상자에 전달하기 위해 vArguments를 통해 전달됩니다. 유형에는 제한이 없습니다. 문자열 유형의 경우 최대 길이는 4096자입니다. 예를 들어,

test1.htm

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

<script> <br> var mxh1 = new Array("mxh","net_lover","맹자 Chapter E") <br> var mxh2 = 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> var a = window.dialogArguments <br> Alert("전달한 매개변수는 다음과 같습니다. " a) <br>&lt ;/script> <br> </div> <br>test3.htm <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="98764" class="copybut" id="copybut98764" onclick="doCopy('code98764')"><u>코드 복사</u></a></span> 코드는 다음과 같습니다. 다음:</div> <div class="codebody" id="code98764"> <br><script> <br> var a = window.dialogArguments <br> Alert("전달한 매개변수는 창 개체입니다. 이름: " a.name) <br> &lt ;/script> </div> <br> window.returnValue를 사용하여 대화 상자가 열린 창에 정보를 반환할 수도 있고, 물론 개체일 수도 있습니다. 예: <br><br>test4.htm <br><div class="codetitle"> <span><a style="CURSOR: pointer" data="76738" class="copybut" id="copybut76738" onclick="doCopy('code76738')"><u>코드 복사 </u></a></span> 코드는 다음과 같습니다. </div> <div class="codebody" id="code76738"> <br>&lt ;script> <br> var a = window.showModalDialog("test5.htm") <br> for(i=0;i<a.length> </script&gt ;test5.htm <br> <script> <br> function sendTo() <br> { <br> var a=new Array("a","b") <br> window.returnValue = a <br> window.close() <br> } <br> </script>

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

test6.htm

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

< ;script>
window.showModalDialog("test7.htm")

test7.htm

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

if(window.location.search) Alert(window.location.search)

test8.htm

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

<입력 이름=txt 값="테스트">
<입력 유형=제출> 양식>
<script> <br> if(window.location.search) 경고(window.location.search) <br> </script>