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>