jQuery UI 대화창 동적으로 생성하기

jQuery UI 대화창의 기본 사용법은 대화창이 될 HTML을 페이지 내에 미리 만들어서 숨겨었다가

보여주는 방식입니다.

여기서는 동적으로 대화창을 만들고, 대화창내에 보여질 내용도 다른 URL을 호출 하여 채워 넣는

방법을 알아봅니다.

1. 필요한 파일들을 가져옵니다.

<link rel="stylesheet" type="text/css" href="../js/jquery-ui-1.12.1/jquery-ui.min.css" />
<script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
<script type="text/javascript" src="../js/jquery-ui-1.12.1/jquery-ui.min.js"></script>

2. 대화창 컨텐츠를 가진 페이지 입니다.(dialog_content.html)

<div>동적으로 불려진 컨텐츠 입니다.</div>

3. 클릭하면 다이얼로그를 열 버튼 입니다.

<button id="dynamic-dialog">동적으로 다이얼로그 열기</button>

4. 동적 대화창 생성 스크립트 입니다.

<script>
$(document).ready(function() {

    // 버튼의 이벤트 핸들러를 붙입니다.
    $("#dynamic-dialog").button().on("click", function () {

    	// 다이얼로그 내용을 가져올 URL입니다.
 	    var url = "./dialog_content.html";

    	// 다이얼로그를 생성합니다.
        $('<div id="DialogDiv">').dialog({

            // 커스텀 스타일을 줍니다.
            dialogClass: 'custom-dialog-style',

            // 모달 다이얼로그로 생성합니다.
            modal: true,

            // 다이얼로그 열기 콜백
            open: function () {

            	// 모달 오버레이 설정
                $(".ui-widget-overlay").css({
                    opacity: 0.5,
                    filter: "Alpha(Opacity=50)",
                    backgroundColor: "black"
                });

            	// 내용을 불러 옵니다.
                $(this).load(url);
            },

            // 닫기 콜백
            close: function (e) {
                $(this).empty();
                $(this).dialog('destroy');
            },
            height: 350,
            width: 400,
            title: '동적 다이얼로그'

        });
    });
});
</script>

설명은 코드에 있는 주석을 참고 하세요. 동적 대화창 생성 방법을 알아보았습니다.