[jQuery] 모달 중복 열림 방지

✅ 방법 1: 플래그 변수 사용

let isModalOpen = false;

$("#createReport").on('click', () => {
    if (isModalOpen) return;

    isModalOpen = true;
    const modal = new TaskReportCreateModal();
    modal.popup();

    $(modal).one('save-complete', () => {
        isModalOpen = false;
        location.reload();
    });

    // 모달이 닫힐 때 플래그 초기화 (필요한 경우)
    $(modal).one('hidden', () => {
        isModalOpen = false;
    });
});

 

✅ 방법 2: DOM 요소 검사로 중복 방지

$("#createReport").on('click', () => {
    if ($('.task-report-modal').length > 0) return;

    const modal = new TaskReportCreateModal();
    modal.popup();

    $(modal).one('save-complete', () => {
        location.reload();
    });
});

 

 

근데 , 나는 모달 html을 공통으로 여러군데에서 쓰고 있고, id값도 매번 동적으로 생성해서 다르기 때문에 체크해서 중복을 거를 수 없어서 방법 1로 하였다.

 

근데 닫기나 취소버튼을 누를 때 hidden 이벤트로 적용이 안되어서 클릭 이벤트로 추가하였다.

$(`#${this.modal.id} .close`).on('click', () => {
    this.close();
});