BootStrap modal 2개 띄웠을 때 hidden.bs.modal event 처리

modal id 값은 각각 아래와 같다.

1. manageDnisDialog

2. manageDnisLicenceCountDialog

레이어 팝업창을 2개 띄우기 위해 jquery ajax를 사용하여 Controller 에서 html 코드를 받아온 후 modal 태그에 직접 넣었다.

// 첫번째 modal 레이어 팝업
$.ajax({
    cache : false,
    type : 'POST',
    dataType : "html",
    url : menu_href,
    data : {
        dnis : dnis,
        action_type : action_type
    },
    success : function(data) {
        $('#manageDnisDialog').html(data); //html data가 담길 target div
        $('#manageDnisDialog').modal({
            keyboard : false,
            show : true
        }); //modal 오픈
    },
    error : function(xhr, status, error) {
        alert(xhr.responseText);//ajax 오류 메세지
        location.reload();
    }
});

//두번째 modal 레이어 팝업
$.ajax({
    url: controller의 requestMapping url',
    type: 'POST',
    dataType: 'html',
    data: { dnis: $("#dnis").val(), site_code: $("#site_code").val() },
    success: function(result) {
        $("#manageDnisLicenceCountDialog").html(result);
        $('#manageDnisLicenceCountDialog').modal({ keyboard : false, show : true });
    }
})

위 이미지와 같이 id가 manageDnisDialog 인 곳에 .html()을 통해 html 코드를 직접 넣었다.

 

마지막 레이어 팝업창을 닫았을 경우 해당 페이지 리로드를 진행한다.

 

//modal이 닫힐때 event
$("#manageDnisDialog").on('hidden.bs.modal', function() {
    //현재 페이지 갱신
    location.reload();
});

 

하지만 예상과는 달리 2번째 레이어 팝업창인 manageDnisLicenceCountDialog를 닫았을 경우에도 위 이벤트가 발생해버린다.

제대로된 해결 방법은 아니지만 모든 팝업창이 닫혔을 경우에만 리로드 하기 위해선 아래와 같이 코드를 추가해줘야 한다.

 

//modal이 닫힐때 event
$("#manageDnisDialog").on('hidden.bs.modal', function() {
    //현재 페이지 갱신
    if($('.modal:visible').length == 0){
        location.reload();
    }
});

위와 같이 첫번째 modal <div> 태그가 존재하는 곳에 hidden.bs.modal 이벤트를 등록한다.

그리고 $('.modal:visible').length 를 통해 열려있는 modal 갯수를 확인하고 0 일경우 리로드를 진행한다.