모달창을 띄우고 싶다면 jQueryUI의 DIALOG 함수를 이용해보자

우리는 보통 WINDOW.OPEN을 이용하여 팝업을 주로 사용하는데...

이번에는 새로운 창이 아닌 현재 페이지에 존재하는 특정 레이아웃을 모달로 띄워보도록 하겠다

이번 코드는 초반에 JQUERYUI의 연동법을 테스트 하신후 이어서 진행하시길

2014/06/19 - [자바스크립트이야기/jQuery UI 소개] - jQueryUI 시작하기 - 다운로드부터 버튼출력까지

위의 링크내용에 추가로 레이어 팝업 관련 내용만 적어보겠다.

1. 우선 버튼태그는 UI까지 적용된 상태라면 다음은 레이어팝업으로 띄워줄 div 코드를 짜보도록 해보자

추가 HTML 코드

<!-- 상단 BUTTON 태그클릭시 보여줄 레이어팝업 태그  -->
	<div id="dialog" title="레이어팝업 제목">
		해당부분은 레이어 팝업의 내용이다. br태그없이 알아서 자동 줄바꿈 처리가 되있음....
</div>

위에보면 div의 title속성이 있는데 해당 속성값은 모달창에 보여줄 타이틀 영역이다.

그리고 <div></div> 코드내에 서술되있는 내용은 모달창에서 보여지는 

내용들이다.

화면사이즈에 따라 자동으로 글자 조절이 가능하다

코드를 작성했으면 이제 저 div태그에 레이어팝업 UI를 적용시켜보도록 하자

스크립트 코드

//레이어팝업 UI 생성후 화면에 안보여주기
		 $( "#dialog" ).dialog({
			//이벤트 발생했을때 보여주려면 autoOpen : false로 지정해줘야 한다.
			autoOpen: false,
			//레이어팝업 넓이
			width: 400,
			//뒷배경을 disable 시키고싶다면 true
			modal: true,
			//버튼종류
			buttons: [
				{
					//버튼텍스트
					text: "Ok",
					//클릭이벤트발생시 동작
					click: function() {
						$( this ).dialog( "close" );
					}
				},
				{
					//버튼텍스트
					text: "Cancel",
					//클릭이벤트발생시 동작
					click: function() {
						$( this ).dialog( "close" );
					}
				}
			]
		});

위와같이 스크립트 코드를 짯으면 div레이아웃에 레이아웃팝업 UI가 적용된것이다.

하지만 버튼 클릭시 화면에 띄워줄것이므로 속성값인 autoOpen값은 false로 주었다.

만들자 마자 보여주고 싶다면 autoOpen을 true로 주면 될것이다.

그리고 modal창으로 띄워주기 위해 modal 속성을 true로 주었다.

이제는 버튼 클릭이벤트를 발생시켜 div레이아웃을 띄워보도록 하자

//버튼 클릭이벤트시, 숨어있는 레이어팝업 오픈하기
 $("#button").click(function(){
	 $( "#dialog" ).dialog( "open" );
 });

실행화면

onload화면

레이어팝업띄우기 버튼 클릭후 화면

레이어팝업 사이즈 조절한 화면

레이어팝업 닫기 이벤트 발생 화면