jquery modal 새로고침, 동적 호출, 멀티 호출

jquery modal 새로고침, 동적 호출, 멀티 호출

 

 

 

jquery modal 팝업을 사용할 경우 해당 페이지를 호출할 때 기존에 로드해놓은 코드가 계속 보인다.

 

url 을 로드해서 ready 함수를 매번 실행하고 싶으나 이전에 로드해놓은 코드가 show 되어서 ready 함수가 실행되지 않았다.

 

필자는 modal 을 호출할 때마다 매번 새롭게 url 을 호출하고 싶다.

 

 

이 방법을 활용하여 다음과 같은 기능으로 확장할 수 있다.

 

1. url을 바꿔주면 동적으로 다른 페이지를 modal 로 띄울 수 있다.

 

2. modal 을 호출할 때마다 reload 또는 refresh 효과를 얻을 수 있다.

 

다음과 같은 modal html 코드가 있다.

<div class="modal fade" id="sampleModalPopup" role="dialog" tabindex="-1">
    <div class="modal-dialog modal-dialog-width1000 modal-dialog-height800">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
        </div>
        <div class="modal-body">
        </div>
        <div class="modal-footer">
            <button type="button" name="button" class="btn btn-color2" data-dismiss="modal" >닫기</button>
        </div>
    </div>
</div>

 

 

 

아래 javascript 를 실행하면 된다.

<script>
    function sampleModalPopup(){
        // 팝업 호출 url
        var url = "호출할 URL";
        
        // 팝업 호출
        $("#sampleModalPopup > .modal-dialog").load(url, function() { 
            $("#sampleModalPopup").modal("show"); 
        });
    }
</script>

4# : 호출할 url

7# : modal html 코드 중 modal-dialog 클래스를 찾아 url을 load 시킨다.

8# : load 후 model 을 show 한다.

 

 

 

 

미리 만들어놓은 modal 틀에 jquery load 를 활용하여 url 을 load 하고

 

그 이후에 model 을 show 하는 간단한 소스이다.