javascript modal

모달창을 처음으로 해보았는데.. 

 

1. html 구성

<a href='modal.html?key={$key}' class='click_pop'>모달창열기</a>

<div class="modal fade" id="clientEditorModal" tabindex="-1" role="dialog" aria-labelledby="clientEditorModalLabel" aria-hidden="true">
  <div class="modal-dialog"><div class="modal-content"></div></div>
</div>

 

 

2. js 구성(modal popup 불러오기)

$(".click_pop").click(function(e){
  e.preventDefault();
  var target = $(this).attr("href");
  
  $("#clientEditorModal .modal-content").load(target, function() {
    $("#clientEditorModal").modal("show");
  });
});

 

※ 위 과정을 거치면 modal.html로 되어있던 페이지가 modal 창 내부에 load 되면서

페이지 속 페이지?의 개념으로 구성할수가 있다.

key값하나만 넘겨주고 modal.html 내부에서 데이터를 지지고 볶고.. 

 

그리고 만들어주면 끝.

 

 

 

장점 : 페이지를 따로 구성하여서 후 관리가 용이하다는 편리성이 있다

단점 : 클래스명, 변수명 등에 대해 하나만 어긋나도 서로 불러올수가 없다.. 명칭은 늘 확실하게