SilentLife :: ASP.NET AJAX Control Toolkit : ModalPopup 2부

2008/10/21 09:50

ASP.NET AJAX Control Toolkit : ModalPopup 2부

2008/10/21 09:50 in IT/ASP.NET

ModalPopupExtender를 활용하여 모달창을 띄우고 Radio 버튼 선택 후 선택 값을 표시하는 예제로 ModalPopupExtender에 대한 속성 사용법에 대해서 알아보겠다.

일단, Control Toolkit을 사용하기 위해서 반드시 필요한 ScriptManager나 Control Toolkit에 있는 ToolkitScriptManager를 form 태그 내부에 위치시킨다.

<ajaxToolkit:ToolkitScriptManager ID="ToolkitScriptManager1"runat="server">

</ajaxToolkit:ToolkitScriptManager>

ToolkitScriptManager를 사용하였다. 이로써, Control Toolkit를 사용할 기본 준비가 되었다.

모달창을 띄울 버튼을 생성한다.

<asp:Button ID="btnModalOpener" runat="server" Text="모달창열기" />

ID는 btnModalOpener이며, 버튼에는 모달창열기라고 표시된다.

모달찰의 역할을 할 패널을 생성한다.

<asp:Panel ID="pnlModalWindow"runat="server"CssClass="modalPopup">

<asp:Panel ID="pmwPnlTitle" runat="server">

올해 가장 재미있게 본 영화는?

</asp:Panel>

<div>

<input type="radio" id="rdoMovieList1" name="rdoMovieList"

value="Iron Man" checked="checked"onclick="selectedRadio(this)"/>

</div>

<div>

<input type="radio" id="rdoMovieList2" name="rdoMovieList"

value="Indiana Jones andthe Kingdom of the Crystal Skull"

onclick="selectedRadio(this)"/>

<label for="rdoMovieList2">Indiana Jones and

theKingdom of the Crystal Skull</label>

</div>

<div>

<input type="radio" id="rdoMovieList3" name="rdoMovieList"

value="Dark Night" onclick="selectedRadio(this)" />

<label for="rdoMovieList3">Dark Night</label>

</div>

<div>

<input type="radio" id="rdoMovieList4" name="rdoMovieList"

value="눈에는 눈 이에는 이" onclick="selectedRadio(this)" />

</div>

<asp:Button ID="pmwBtnOk" runat="server" Text="OK" />

<asp:Button ID="pmwBtnCancel" runat="server" Text="Cancel" />

</asp:Panel>

btnModalOpener를 클릭하면 pnlModalWindow가 표시된다.

이제 pnlModalWindow를 표시하기 위해서 ModalPopupExtender의 속성을 정의하겠다.

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

TargetControlID="btnModalOpener"

PopupControlID="pnlModalWindow"

BackgroundCssClass="modalBackground"

DropShadow="true"

OkControlID="pmwBtnOk"

OnOkScript="onOK()"

CancelControlID="pmwBtnCancel"

OnCancelScript="onCancel()"

PopupDragHandleControlID="pmwPnlTitle"

RepositionMode="RepositionOnWindowResizeAndScroll" />

TargetControlID에 btnModalOpener로 선언하여 모달창을 열기위한 버튼을 정의한다.
PopupControlID에 pnlModalWindow로 선언하여 TargetControlID에 의해 발생한 이벤트로 표시될 모달창을 정의한다.
BackgroundCssClass로 PopupControlID이 표시될 때 모달창의 백그라운드로 적용할 CSS Class이다.

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

DropShadow를 true로 선언하여 PopupControlID로 표시된 모달창에 그림자 효과를 준다.
OkControlID는 PopupControlID로 선언된 모달창 내부의 컨트롤 ID로, confirm창의 확인 버튼 역할을 한다.
OnOkScript는 OkControlID에 의해 이벤트가 발생하였을 때 실행할 자바스크립트 함수이다.
CancelControlID는 PopupControlID로 선언된 모달창 내부의 컨트롤 ID로, confirm창의 취소 버튼 역할을 한다.
OnCancelScript는 CancelControlID에 의해 이벤트가 발생하였을 때 실행할 자바스크립트 함수이다.
PopupDragHandleControlID는 PopupControlID로 표시된 모달창을 마우스로 드래그 할 경우, 마우스 포인터가 모달창을 잡을 수 있는 컨트롤을 정의하며, pmwPnlTitle로 선언하여, 이 영역을 잡고 모달창을 이동시킬 수 있다.
RepositionMode는 윈도우의 크기의 변화가 있거나, 스크롤이 되었을 경우, 모달창의 위치를 재 설정할 것인지 정의하며, RepositionOnWindowResizeAndScroll로 선언하여 윈도우의 크기가 변화하거나 스크롤 되었을 때, 모두 모달창의 위치를 재 정의하도록 하였다.

추가적으로 X, Y 속성이 있는데, 이 속성은 X축과 Y축의 위치를 고정히켜서 표시하게 된다. X, Y를 선언하면, RepositionMode의 속성은 무시된다.

다음은 전체 소스이다.

.modalBackground {

background-color:Gray;

filter:alpha(opacity=70);

opacity:0.7;

}

.modalPopup {

background-color:#ffffdd;

border-width:3px;

border-style:solid;

border-color:Gray;

padding:3px;

width:250px;

}

</style>

var selectedValue;

function selectedRadio(t) {

selectedValue = t.value;

}

function onOK() {

alert(selectedValue + "(을)를 선택하였습니다.");

}

function onCancel() {

alert("취소하였습니다.");

return false;

}

window.onload = function() {

var rdoLen = document.getElementsByName("rdoMovieList").length;

for (var i = 0; i < rdoLen; i++) {

if (document.getElementsByName("rdoMovieList").item(i).checked) {

selectedValue = document.getElementsByName("rdoMovieList").item(i).value;

}

</script>

<asp:Button ID="btnModalOpener" runat="server" Text="모달창열기" />

<asp:Panel ID="pnlModalWindow" runat="server" CssClass="modalPopup">

<asp:Panel ID="pmwPnlTitle" runat="server">

올해 가장 재미있게 본 영화는?

</asp:Panel>

<div>

<input type="radio" id="rdoMovieList1" name="rdoMovieList"

value="Iron Man" checked="checked" onclick="selectedRadio(this)" />

</div>

<div>

<input type="radio" id="rdoMovieList2" name="rdoMovieList"

value="Indiana Jones and the Kingdom of the Crystal Skull"

onclick="selectedRadio(this)" />

<label for="rdoMovieList2">Indiana Jones and

the Kingdom of the Crystal Skull</label>

</div>

<div>

<input type="radio" id="rdoMovieList3" name="rdoMovieList"

value="Dark Night" onclick="selectedRadio(this)" />

<label for="rdoMovieList3">Dark Night</label>

</div>

<div>

<input type="radio" id="rdoMovieList4" name="rdoMovieList"

value="눈에는 눈 이에는 이" onclick="selectedRadio(this)" />

</div>

<asp:Button ID="pmwBtnOk" runat="server" Text="OK" />

<asp:Button ID="pmwBtnCancel" runat="server" Text="Cancel" />

</asp:Panel>

<ajaxToolkit:ModalPopupExtender ID="ModalPopupExtender1" runat="server"

TargetControlID="btnModalOpener"

PopupControlID="pnlModalWindow"

BackgroundCssClass="modalBackground"

DropShadow="true"

OkControlID="pmwBtnOk"

OnOkScript="onOK()"

CancelControlID="pmwBtnCancel"

OnCancelScript="onCancel()"

PopupDragHandleControlID="pmwPnlTitle"

RepositionMode="RepositionOnWindowResizeAndScroll" />

다음은 실행결과이다.

모달창 표시전

모달창 표시

OK 및 Cancel 버튼을 각각 클릭하면 OnOkScript과 OnCancelScript으로 선언한 자바스크립트 함수가 실행됨을 알 수 있다.

BackgroundCssClass속성을 삭제하면 다음과 같은 결과를 얻는다.

BackgroundCssClass 제거

모달창 백그라운드로 회색의 배경이 사라져서 모달창처럼 느껴지지 않는다. 이 스타일은 유지하는 것이 모달창의 느낌을 살리는데 효과적을 듯 하다.

이처럼 모달창을 평함한 팝업창 스타일이 아닌 좀 더 눈에 띄는 창으로 만들고 싶을 경우 ModalPopupExtender를 사용하면 효과적으로 원하는 스타일을 적용할 수 있을 것이다.