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-width2000 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 를 실행하면 된다.
<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 하는 간단한 소스이다.
팝업창을 닫으면서 부모창을 새로고침하는 방법 간단합니다.
첫번째 방법
<script>
opener.parent.location="부모창주소(원하는주소)";
</script>
이렇게 직접 주소를 적어도 좋고,
두번째방법
단순히 새로고침을할거라면
<script>
opener.parent.location.reload();
window.close();
</script>
간단하쥬? :)
팝업창을 띄우고, 일련의 업무가 진행된 후 부모창을 새로고침해야 할 경우가 있을것이다.
그럴 경우 여러가지 방법이 있다.
일단, window.opener는 자식창을 열어준 창에 접근하는 접근자임.
<!-- 방법1 --> function close1() { opener.location.reload(); window.close(); } <!-- 방법2 --> function close2() { window.opener.document.location.href = window.opener.document.URL; window.close(); } <!-- 방법3 --> function close3() { opener.location.replace("페이지~.jsp?deer=" + "deer"); window.close(); }자바스크립트도 여러가지 선객체들을 가지고 있고, 그 객체들의 API를 잘 활용하는것도 시간 낭비를
줄일 수 있는 방법이라 하겠다.