'Javascript'에 해당되는 글 1건

  1. 2009.05.08 [Javascript] window.modal usage (1)
2009. 5. 8. 13:37

원문 : O'Reilly의 JavaScript and DHTML Cookbook



window.showModalDialog와 window.showModelessDialog 는 modal window가 보이는 동안
script 프로세싱을 중단시키고, modal window가 닫히면 계속 처리됩니다.



개인적인 생각으로는 Web의 통제권이 완전히 modal창으로 넘어가서 window.open 처럼
다른 화면이 아닌 단일창처럼 보여지는게 아닌가 생각됩니다. 결국 main창과
modal창은 다른 window지만 modal창이 main창의 프로세싱을 넘겨받아서 main창의
작업을 중단시켜 놓는것이 아닌가 생각됩니다.



사용법

   var dialogAnswer = window.showModalDialog(팝업.html, 모달명, 옵션);



modal창과 main창은 서로 다른 창이기 때문에 main창의 값을 읽기 위해서
window.dialogArguments property를 사용합니다.



modal창에서 main창으로 값을 넘기기 위해서는 window.returnValue property를
사용합니다.

[출처] window.showModal/Modeless에 대하여|작성자 헤르메스

/*
 ******************************************************************************************/

【 Show Modal Dialog 】

 - 일반적인 형태는 Window.open 과 동일한 형태를 가지지만, 팝업과는 달리 항상 부모창 위에 존재하며, 자식창

의 프로세스가 종료되지 않으면 부모창으로 되돌아 갈 수 없는 점이 window.open 과 다른 점이다.

 - 다시말해, 모달창은 오픈과 동시에 포커스를 자식창에서 잃지 않지만, 모달리스는 포커스를 부모창으로 이동

시킬 수 있다.

 - Show Modal은 ShowModal 과 ShoModaless로 분류되는데 ShowModaless는 일반 팝업창과 같다.

 * 사용법

 - Window.ShowModalDialog("URL",오브젝트 또는 윈도우,속성);
 - Window.ShowModalDialog("ex.asp",window,"dialogwidth:600px;...");

 - 속성부여방법
   Dialogwidth = '가로길이'
   Dialogheight = '세로길이'
   기타등등..

 - 사용처 : 기업용 홈페이지 또는 개인홈페이지의 ID조회등 정보 조회에 어울린다.

 * 예제 (부모창)

<html>

1  <script>
2  function openwin(){
 
3    var x= "dialogwidth:600px;dialogHeight:600px;status:no;help:no";
 
4    returnValue = window.showModalDialog("child.htm", window,x);
5    alert(returnValue)
6    }
7  </script>

8  <body>

9  <form name="Myform">
10 <input type="button" value="TEST" onclick="openwin();"><br><Br>
11    <input type="text" name="aaa" value="인천유나이티드">
12    <input type="text" name="bbb" value="수원삼성블루윙즈">
13    <input type="text" name="ccc" value="성남일화천마">
14    <input type="text" name="ddd" value="울산현대호랑이">
15    <input type="text" name="eee" value="FC서울">
16 </form>

12 </body>
13 </html>


------------------------ 설명 ---------------------------
2 : 모달창 함수 실행.
3 : 모달창을 띄울때 속성을 변수에 저장하여 사용.
4 : 모달창은 자식창에 데이터를 보낼 수도 있고, 또한 다시 받을 수도 있다.


  * 예제 (자식창)  child.htm

<html>

<script>
function init()
{
 var sData = dialogArguments;
 alert(sData.document.Myform.aaa.value);
 alert(sData.document.Myform.bbb.value);
 alert(sData.document.Myform.ccc.value);
 alert(sData.document.Myform.ddd.value);
 alert(sData.document.Myform.eee.value);
 window.close();
 window.returnValue="끝났지롱";
}
</script>

<body>
<form name="myform">
<input type="button" value="TEST" onclick="init()">
</form>
</body>
</html>

------------------------ 설명 ---------------------------

- 자식창에서 TEST 버튼을 클릭했을 시, 부모창에 있는 각각의 텍스트박스에
있는 내용을 Alert을 이용해서 볼 수 있다. 또한 모든 내용을 보고 난 후에는
다시 ReturnValue="끝났지롱"; 을 부모창에 보내준다.


- 모달은 오브젝트로 값을 저장하여, 부모창과 자식창에 넘겨주고, 받는 기능을 할 수 있다.

[출처] ShowModalDialog|작성자 의천도너
Posted by 굿데이

댓글을 달아 주세요

  1. BlogIcon ugg boots 2013.07.19 07:29  댓글주소  수정/삭제  댓글쓰기

    슬퍼서 우는거 아니야..바람이 불어서 그래..눈이 셔서..