https://www.cocotoon.co.kr/js/web/modal.js?v=1790899917

1/**
2 *  사용방법
3 *  $(selector).modal(); 로 호출시 selector 클릭시 modal 호출
4 *  $.fn.modal(); 로 후출시 modal 바로 호출
5 *  defaults 옵션 주석 참고
6 *  2개 이상의 modal을 동시에 띄울 경우 modalClass명을 다르게 호출
7 */
8(function($) {
9    let modalMask;
10
11    $.fn.modal = function(options) {
12        const defaults = {
13            title: '', // modal 제목
14            message: '', // modal 내용
15            type: 'confirm', // confirm : 취소/확인, info : 확인
16            cancelText: '취소', // 취소버튼 기본 문구
17            confirmText: '확인', // 확인버튼 기본 문구
18            cancelColor: '#E6E6E6', // 취소버튼 기본 색상
19            confirmColor: '#00A979', // 확인버튼 기본 색상
20            cancelLink: '', // 취소버튼 링크
21            confirmLink: '', // 확인버튼 링크
22            onCancel: null, // 취소버튼 함수 정의
23            onConfirm: null, // 확인버튼 함수 정의
24            customData: null, // 사용자 데이터
25            modalClass: 'modal-layer' // 기본 modal class명
26        };
27
28        // options으로 넘어온 값은 없으면 defaults 값으로 셋팅
29        const settings = $.extend({}, defaults, options);
30
31        // modalMask가 없을 경우에만 생성 (무한생성방지)
32        if (!modalMask) {
33            modalMask = document.createElement('div');
34            modalMask.id = 'modalMask';
35            document.body.appendChild(modalMask);
36        }
37
38        // modal div 생성 및 class명 지정
39        const modalElement = document.createElement('div');
40        modalElement.classList.add(settings.modalClass);
41
42        let titleHtml = ''; // 타이틀 HTML 초기화
43        let messageHtml = ''; // 내용 HTML 초기화
44        let buttonHtml = ''; // 버튼 HTML 초기화
45
46        // 제목이 넘어왔으면 modal에 추가
47        if (settings.title) {
48            titleHtml = `<h3 class="title">${settings.title}</h3>`;
49        }
50
51        // 내용이 넘어왔으면 modal에 추가
52        if (settings.message) {
53            messageHtml = `<p class="message">${settings.message}</p>`;
54        }
55
56        // modal type이 info가 아니면 취소버튼 추가 (색상 및 버튼 글자 추가)
57        if (settings.type != "info") {
58            buttonHtml = `<button class="modal-cancel" style="background-color: ${settings.cancelColor}">${settings.cancelText}</button>`;
59        }
60        // modal에 확인버튼 추가 (색상 및 버튼 글자 추가)
61        buttonHtml += `<button class="modal-confirm" style="background-color: ${settings.confirmColor}">${settings.confirmText}</button>`;
62
63        // modal 생성
64        modalElement.innerHTML = `
65                    <span class="modal-close"><img src="/img/common/icon_close.svg" alt="닫기" /></span>
66                        ${titleHtml}
67                        ${messageHtml}                    
68                        <div class="btnArea">
69                            ${buttonHtml}
70                        </div>
71                    `;
72
73        // modal type이 info가 아니면 취소 버튼에 이벤트 추가
74        if (settings.type != "info") {
75            const cancelBtn = modalElement.querySelector('.modal-cancel');
76            const closeBtn = modalElement.querySelector('.modal-close');
77
78            // 취소 링크가 있으면 취소버튼, X 닫기 버튼에 링크 추가
79            if (settings.cancelLink) {
80                cancelBtn.addEventListener('click', () => {
81                    window.location.href = settings.cancelLink;
82                });
83                closeBtn.addEventListener('click', () => {
84                    window.location.href = settings.cancelLink;
85                });
86            // 취소 버튼, X버튼 modal 닫기 처리
87            } else {
88                cancelBtn.addEventListener('click', () => {
89                    closeModal();
90                    // 닫기 함수가 정의 되어 있으면 함수 처리
91                    if (typeof settings.onCancel === 'function') {
92                        settings.onCancel(settings.customData);
93                    }
94                });
95                closeBtn.addEventListener('click', () => {
96                    closeModal();
97                    // 닫기 함수가 정의 되어 있으면 함수 처리
98                    if (typeof settings.onCancel === 'function') {
99                        settings.onCancel(settings.customData);
100                    }
101                });
102            }
103        // modal type이 infi면 X 버튼은 그냥 닫기 처리
104        } else {
105            const closeBtn = modalElement.querySelector('.modal-close');
106            closeBtn.addEventListener('click', closeModal);
107        }
108
109        const confirmBtn = modalElement.querySelector('.modal-confirm');
110
111        // 확인 버튼에 링크가 있으면 링크로 보내기
112        if (settings.confirmLink) {
113            confirmBtn.addEventListener('click', () => {
114                window.location.href = settings.confirmLink;
115            });
116        } else {
117            confirmBtn.addEventListener('click', () => {
118                // 확인 함수가 정의 되어 있으면 함수 처리
119                if (typeof settings.onConfirm === 'function') {
120                    settings.onConfirm(settings.customData);
121                }
122                // 확인 버튼 modal 닫기처리
123                closeModal();
124            });
125        }
126
127        // modal 닫는 함수
128        function closeModal() {
129            $(modalMask).hide();
130            $(modalElement).hide();
131            $('.'+settings.modalClass).remove();
132            /*$(modalMask).fadeOut();
133            $(modalElement).fadeOut().delay(500).queue(function (){
134                $('.'+settings.modalClass).remove();
135            });*/ // jQuery를 사용하여 fadeOut 애니메이션 적용
136        }
137
138        // modal을 열기 전에 상태를 확인하여 중복 열림 방지
139        function openModal() {
140            if (!$('.'+settings.modalClass).length) {
141                /*$(modalElement).fadeIn();
142                $(modalMask).fadeIn();*/
143                $(modalElement).show();
144                $(modalMask).show();
145                document.body.appendChild(modalElement);
146            }
147        }
148
149        // modal 호출시 정의된 선택자 클릭하여 모달을 호출
150        if (this.selector) {
151            this.on('click', function() {
152                openModal()
153            });
154        // 선택자 없으면 함수 호출로 모달을 호출
155        } else {
156            openModal()
157        }
158
159        return this;
160    };
161})(jQuery);