language/jquery
jquery modal 새로고침, 동적 호출, 멀티 호출
CofS
2018. 10. 23. 13:27
jquery modal 새로고침, 동적 호출, 멀티 호출
jquery modal 팝업을 사용할 경우 해당 페이지를 호출할 때 기존에 로드해놓은 코드가 계속 보인다.
url 을 로드해서 ready 함수를 매번 실행하고 싶으나 이전에 로드해놓은 코드가 show 되어서 ready 함수가 실행되지 않았다.
필자는 modal 을 호출할 때마다 매번 새롭게 url 을 호출하고 싶다.
이 방법을 활용하여 다음과 같은 기능으로 확장할 수 있다.
1. url을 바꿔주면 동적으로 다른 페이지를 modal 로 띄울 수 있다.
2. modal 을 호출할 때마다 reload 또는 refresh 효과를 얻을 수 있다.
다음과 같은 modal html 코드가 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12 |
<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> |
cs |
아래 javascript 를 실행하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11 |
<script>
function sampleModalPopup(){
// 팝업 호출 url
var url = "호출할 URL";
// 팝업 호출
$("#sampleModalPopup > .modal-dialog").load(url, function() {
$("#sampleModalPopup").modal("show");
});
}
</script> |
cs |
4# : 호출할 url
7# : modal html 코드 중 modal-dialog 클래스를 찾아 url을 load 시킨다.
8# : load 후 model 을 show 한다.
미리 만들어놓은 modal 틀에 jquery load 를 활용하여 url 을 load 하고
그 이후에 model 을 show 하는 간단한 소스이다.