JS 모달 (modal.js)
모달 플러그인은 현재 페이지의 상단에 표시되는 대화 상자 / 팝업 창입니다.
조동사에 대한 자습서를 들어, 우리의 읽기 Bootstrap 모달 자습서 .
모달 플러그인 클래스
| 수업 | 기술 |
|---|---|
| .modal | 모달를 작성합니다 |
| .modal-content | 스타일이 제대로 테두리, 배경 색 등으로 모달 모달 헤더, 본문 및 바닥 글을 추가하려면이 클래스를 사용합니다. |
| .modal-header | 모달의 헤더의 스타일을 정의 |
| .modal-body | 모달의 몸의 스타일을 정의 |
| .modal-footer | 모달에서 바닥 글의 스타일을 정의합니다. 참고 :이 영역은 오른쪽 정렬 기본입니다. 이를 변경하려면, 텍스트 정렬과 CSS를 덮어 쓰기 : 왼쪽 | 센터 |
| .modal-sm | 작은 모달을 지정합니다 |
| .modal-lg | 큰 모달을 지정합니다 |
| .fade | 추가에 밖으로 모달을 페이드 애니메이션 / 전환 효과 |
모달 비아에게 트리거 data-* 속성
추가 data-toggle="modal" 및 data-target="#modalID" 모든 요소.
참고 : 들어 <a> 요소를 생략 data-target 및 사용 href="#modalID" 를 대신 :
예
<!-- Buttons -->
<button type="button" data-toggle="modal" data-target="#myModal">Open
Modal</button>
<!-- Links -->
<a data-toggle="modal"
href="#myModal">Open
Modal</a>
<!-- Other elements -->
<p data-toggle="modal" data-target="#myModal">Open
Modal</p>
»그것을 자신을 시도 트리거 통해 자바 스크립트
수동으로 사용 :
모달 옵션
옵션 데이터 속성이나 자바 스크립트를 통해 전달 될 수 있습니다. 데이터 특성의 경우에서와 같이, 데이터 - 옵션에 이름을 추가 data-backdrop="" .
| 이름 | 유형 | 태만 | 기술 | 시도 해봐 |
|---|---|---|---|---|
| backdrop | boolean or the string "static" | true | 모달 어두운 오버레이를할지 여부를 지정합니다 :
당신이 값을 지정하는 경우 "static" , 그것의 외부를 클릭하면 모달을 닫을 수 없습니다 | JS 사용 하여 데이터를 |
| keyboard | boolean | true | 모달가 이스케이프 키를 폐쇄 할 수 있는지 여부를 지정합니다 (Esc) :
| JS 사용 하여 데이터를 |
| show | boolean | true | 초기화 할 때 모달를 표시할지 여부를 지정합니다 | JS 사용 하여 데이터를 |
모달 방법
다음 표는 사용 가능한 모든 모달 방법을 보여줍니다.
| 방법 | 기술 | 시도 해봐 |
|---|---|---|
| .modal( options ) | 모달 등의 내용을 활성화합니다. 유효한 값은 위의 옵션을 참조하십시오 | 시도 해봐 |
| .modal("toggle") | 모달를 전환 | 시도 해봐 |
| .modal("show") | 모달를 엽니 다 | 시도 해봐 |
| .modal("hide") | 모달를 숨 깁니다 | 시도 해봐 |
모달 이벤트
다음 표는 사용 가능한 모든 모달 이벤트를 보여줍니다.
| 행사 | 기술 | 시도 해봐 |
|---|---|---|
| show.bs.modal | 모달이 표시하려고 할 때 발생합니다 | 시도 해봐 |
| shown.bs.modal | 모달가 완전히 표시 될 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
| hide.bs.modal | 모달 숨겨진하려고 할 때 발생합니다 | 시도 해봐 |
| hidden.bs.modal | 모달가 완전히 숨겨져 때 발생합니다 (CSS 전환을 완료 한 후) | 시도 해봐 |
예
로그인 모달
다음 예는 로그인에 대한 모달를 만듭니다
예
<div class="container">
<h2>Modal Login Example</h2>
<!-- Trigger the modal with a button -->
<button type="button"
class="btn btn-default btn-lg" id="myBtn">Login</button>
<!--
Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal
content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 style="color:red;"><span class="glyphicon glyphicon-lock"></span>
Login</h4>
</div>
<div class="modal-body">
<form role="form">
<div class="form-group">
<label for="usrname"><span class="glyphicon glyphicon-user"></span>
Username</label>
<input type="text" class="form-control" id="usrname" placeholder="Enter
email">
</div>
<div class="form-group">
<label for="psw"><span class="glyphicon glyphicon-eye-open"></span>
Password</label>
<input type="text" class="form-control" id="psw" placeholder="Enter
password">
</div>
<div class="checkbox">
<label><input type="checkbox" value="" checked>Remember me</label>
</div>
<button type="submit" class="btn btn-default btn-success btn-block"><span class="glyphicon
glyphicon-off"></span> Login</button>
</form>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default btn-default pull-left"
data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span>
Cancel</button>
<p>Not a member? <a href="#">Sign Up</a></p>
<p>Forgot <a href="#">Password?</a></p>
</div>
</div>
</div>
</div>
</div> »그것을 자신을 시도