twitter-bootstrap
모달 대화 상자

비고

기본 HTML 사용

부트 스트랩 모달 대화 상자는 페이지 수준 내용 위에 떠있는 모달 대화 상자 창을 만드는 부트 스트랩 구성 요소입니다.

다음은 HTML의 부트 스트랩 모달 대화 상자의 기본 사용 예입니다.

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

기본 자바 스크립트 사용 및 초기화

모달 대화 상자 구성 요소는 $('#myModal').modal(options) 사용하여 jQuery를 통해 인스턴스화 할 수 있습니다 $('#myModal').modal(options) 여기서 $('#myModal') 은 특정 모달 대화 상자에 대한 최상위 참조이고 options 은 Javascript 객체입니다 모덜 다이얼로그의 디폴트 속성

options 개체를 사용하면 모달 대화 상자가 작동하는 방식에 영향을주는 여러 속성을 정의 할 수 있습니다. 이러한 속성은 다음과 같이 정의됩니다.

• backdrop 속성을 사용하면 모달 대화 상자 뒤에 회색 배경 오버레이를 표시할지 여부를 정의 할 수 있습니다. 부울 값과 "static"문자열이 모두 인식됩니다. "정적"을 지정하면 사용자가 배경 오버레이를 클릭 할 때 모달 대화 상자가 닫히지 않습니다.
• keyboard 속성을 사용하면 keyboard 에서 이스케이프 키를 누를 때 모달 대화 상자를 닫을 지 여부를 정의 할 수 있습니다.
• show 속성을 사용하면 모달을 초기화 할 때 모달 대화 상자를 표시할지 여부를 사용자가 정의 할 수 있습니다.

다음은 기본적인 자바 스크립트 사용 예입니다.

$('#carModal').modal({ backdrop: false, keyboard: true, show: false });

다른 부트 스트랩 구성 요소와 마찬가지로 모달 옵션도 데이터 속성을 통해 HTML로 지정할 수 있습니다.