https://offbyone.tistory.com/356?category=283347 참고
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery UI 대화창 동적으로 생성하기</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<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"
});
// 내용을 불러 옵니다.
alert(url);
$(this).load(url);
},
// 닫기 콜백
close: function (e) {
$(this).empty();
$(this).dialog('destroy');
},
height: 350,
width: 400,
title: '동적 다이얼로그'
});
});
});
</script>
</head>
<body>
<button id="dynamic-dialog">동적으로 다이얼로그 열기</button>
</body>
</html>
개인 정리 블로그입니다