모달 팝업창 제어하기
컨텐츠 정보
- 34,310 조회
- 41 추천
- 목록
본문
<!--
모달창은 쉽게 말해 alert()창 처럼 호출되면 창을 닫기 전 까지 부모창에 포커스를 보낼 수 없는 창을 말합니다. 기능은 좋은데..아쉽게도 아직은 브라우져 버전에 영향을 받습니다.6.0이던가..msdn을 찾아보세요..본지가 오래되서..가물합니다. 아뭏든 윈도우 익스플로러에서만 되고 그것도 상위 버전에서만 되기 때문에 조금 문제가 있긴 합니다만..1년정도만 지나면 거의 운영체제가 2000이상은 될듯하니 지금 알아두면 좋은 팁이 아닐까 생각합니다.
////////////////////////////////////////////////////////////////////////////////
1. modal_dialog.html
///////////////////////////////////////////////////////////////////////////////
-->
<HEAD>
<HTML>
<HEAD>
<TITLE>모달 다이알로그 샘플입니다</TITLE>
<SCRIPT>
var userName="";
function callModalWindow()
{
window.showModalDialog("modal_window.html", window);
//window.showModalessDialog("myDialog.html", window);//모달 기능 없이 다이알로그 오픈..
}
function changeText()
{
inputText.innerText = userName;
}
//구현하고 싶은 기타 스크립트를 추가 하시면 됩니다...
function kkk()
{
alert('hi~ test~');
}
</SCRIPT>
</HEAD>
<BODY>
<P>아무거나 적어 보세요: <SPAN ID="inputText"
STYLE="color:red;font-size:24">메렁~~</SPAN></P> <INPUT TYPE="button"
VALUE="모달창열기" onclick="callModalWindow()">
</BODY>
</HTML>
<!--
////////////////////////////////////////////////////////////////////////////////
2. modal_window.html
///////////////////////////////////////////////////////////////////////////////
-->
<HTML>
<HEAD>
<SCRIPT>
function insertText()
{//입력한 값 적용
var tempName = dialogArguments;
tempName.userName = testText.value;
tempName.changeText();
}
function modalCancel()
{
var tempName = dialogArguments;
tempName.changeText();
}
function parentClose(){
window.top.close();
}
function newWin(){
window.open("test.html","","");
}
function modalclose(){
self.close();
}
</SCRIPT>
</HEAD>
<BODY>
아무거나 적어보세요 :
<INPUT Type="text" ID=testText><BR><BR>
<INPUT VALUE="입력적용" TYPE=button onclick="insertText();"><BR>
<INPUT VALUE="입력적용하고모달창닫기" TYPE=button onclick="insertText();window.close();"><BR>
<INPUT VALUE="입력적용안하고모달창만닫기" TYPE=button onclick="modalCancel();window.close();"><BR>
<INPUT VALUE="모달에서새로운창열기" TYPE=button onclick="newWin();">
</BODY>
</HTML>
<!--
응용하면 모달창에서 새로 연 창에서 다시 최상위 부모창의 메소드를 이용한다던지 값을 넘길 수가 있습니다.
키포인트는 일반적인 팝업이라면 자식을 연 부모창을 찾아 갈때는 opener. 이라고 해주는데 모달창의 경우는 dialogArguments.이라고 합니다. 쉽게 설명하면 만약 내가 부모창에서 자식창을 열고 그 자식창에서 부모창의 함수를 호출할 경우에 opener.aaa() 라는 식으로 호출하는데 부모창에서 자식창을 모달다이알로그로 열었다면 자식창은 모달창이므로 자신을 연 부모창의 함수를 호출할경우에는 dialogArguments.aaa() 라고 해주면 됩니다.
예를들면..
상황)부모창 a.html 모달창 b.html 모달창에서 연 새창 c.html
a.html에서 자식창으로 모달다이알로그 b.html을 열고 다시 b.html에서 c.html을 열어서 3개의 창이 나왔습니다.
여기서 c.html이 a.html에 있는 임의의 스크립트 aaa()라는걸 호출하고 싶다면 다음과 같이 해줍니다.
c.html의 부모창은 opener가 되겠죠.
b.html의 부모창은 dialogArguments가 되겠죠.
따라서 다음과 같이 됩니다.
opener.dialogArguments.aaa();//
-->
모달창은 쉽게 말해 alert()창 처럼 호출되면 창을 닫기 전 까지 부모창에 포커스를 보낼 수 없는 창을 말합니다. 기능은 좋은데..아쉽게도 아직은 브라우져 버전에 영향을 받습니다.6.0이던가..msdn을 찾아보세요..본지가 오래되서..가물합니다. 아뭏든 윈도우 익스플로러에서만 되고 그것도 상위 버전에서만 되기 때문에 조금 문제가 있긴 합니다만..1년정도만 지나면 거의 운영체제가 2000이상은 될듯하니 지금 알아두면 좋은 팁이 아닐까 생각합니다.
////////////////////////////////////////////////////////////////////////////////
1. modal_dialog.html
///////////////////////////////////////////////////////////////////////////////
-->
<HEAD>
<HTML>
<HEAD>
<TITLE>모달 다이알로그 샘플입니다</TITLE>
<SCRIPT>
var userName="";
function callModalWindow()
{
window.showModalDialog("modal_window.html", window);
//window.showModalessDialog("myDialog.html", window);//모달 기능 없이 다이알로그 오픈..
}
function changeText()
{
inputText.innerText = userName;
}
//구현하고 싶은 기타 스크립트를 추가 하시면 됩니다...
function kkk()
{
alert('hi~ test~');
}
</SCRIPT>
</HEAD>
<BODY>
<P>아무거나 적어 보세요: <SPAN ID="inputText"
STYLE="color:red;font-size:24">메렁~~</SPAN></P> <INPUT TYPE="button"
VALUE="모달창열기" onclick="callModalWindow()">
</BODY>
</HTML>
<!--
////////////////////////////////////////////////////////////////////////////////
2. modal_window.html
///////////////////////////////////////////////////////////////////////////////
-->
<HTML>
<HEAD>
<SCRIPT>
function insertText()
{//입력한 값 적용
var tempName = dialogArguments;
tempName.userName = testText.value;
tempName.changeText();
}
function modalCancel()
{
var tempName = dialogArguments;
tempName.changeText();
}
function parentClose(){
window.top.close();
}
function newWin(){
window.open("test.html","","");
}
function modalclose(){
self.close();
}
</SCRIPT>
</HEAD>
<BODY>
아무거나 적어보세요 :
<INPUT Type="text" ID=testText><BR><BR>
<INPUT VALUE="입력적용" TYPE=button onclick="insertText();"><BR>
<INPUT VALUE="입력적용하고모달창닫기" TYPE=button onclick="insertText();window.close();"><BR>
<INPUT VALUE="입력적용안하고모달창만닫기" TYPE=button onclick="modalCancel();window.close();"><BR>
<INPUT VALUE="모달에서새로운창열기" TYPE=button onclick="newWin();">
</BODY>
</HTML>
<!--
응용하면 모달창에서 새로 연 창에서 다시 최상위 부모창의 메소드를 이용한다던지 값을 넘길 수가 있습니다.
키포인트는 일반적인 팝업이라면 자식을 연 부모창을 찾아 갈때는 opener. 이라고 해주는데 모달창의 경우는 dialogArguments.이라고 합니다. 쉽게 설명하면 만약 내가 부모창에서 자식창을 열고 그 자식창에서 부모창의 함수를 호출할 경우에 opener.aaa() 라는 식으로 호출하는데 부모창에서 자식창을 모달다이알로그로 열었다면 자식창은 모달창이므로 자신을 연 부모창의 함수를 호출할경우에는 dialogArguments.aaa() 라고 해주면 됩니다.
예를들면..
상황)부모창 a.html 모달창 b.html 모달창에서 연 새창 c.html
a.html에서 자식창으로 모달다이알로그 b.html을 열고 다시 b.html에서 c.html을 열어서 3개의 창이 나왔습니다.
여기서 c.html이 a.html에 있는 임의의 스크립트 aaa()라는걸 호출하고 싶다면 다음과 같이 해줍니다.
c.html의 부모창은 opener가 되겠죠.
b.html의 부모창은 dialogArguments가 되겠죠.
따라서 다음과 같이 됩니다.
opener.dialogArguments.aaa();//
-->
관련자료
댓글 0
등록된 댓글이 없습니다.
