부트스트랩 모달

// 모달 체인 메소드 형식
// 모달이 열고 닫힐 때 multiple fire 될 경우 참고
$('#dialog')
.modal({show: false})
.on('hide.bs.modal', function () {
    //..................
}).on('shown.bs.modal', function (event) {
    //..................                  
}).on('hidden.bs.modal', function () {
    $("#dialog").off();
});
$('#dialog').modal('show'); // $('#dialog').toggle(); $('#dialog').modal("toggle") 도 가능

// hide와 hidden 의 차이
hide.bs.modal - 메서드가 호출 될 때 즉시 시작
hidden.bs.modal - 모달이 사용자로부터 숨겨지면 시작됩니다 (CSS 전환이 완료 될 때까지 대기)

// 모달 크기 조절
// 새로 정의한 클래스를 알맞은 곳에 넣어주면 된다.
// height 조절시, modal-content 영역에 dependent 하다. 
.modal-dialog.modal-fullsize {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
.modal-content.modal-fullsize {
  height: auto;
  min-height: 100%;
  border-radius: 0; 
}

// 모달 위치 조절
// 새로 정의한 클래스를 알맞은 곳에 넣어주면 된다.
.modal.modal-center {
  text-align: center;
}

@media screen and (min-width: 768px) { 
  .modal.modal-center:before {
    display: inline-block;
    vertical-align: middle;
    content: " ";
    height: 100%;
  }
}

.modal-dialog.modal-center {
  display: inline-block;
  text-align: left;
  vertical-align: middle; 
}