부트 스트랩 모달 상자 (모달) 위젯

모달 상자 (모달) 부모 폼의 하위 폼에 중첩된다. 일반적으로, 상기 목적은 하나의 소스로부터의 컨텐츠를 표시하고, 부모 폼을 남기지 않고 상호 작용이있을 수있다. 하위 폼 등등 정보, 상호 작용을 제공 할 수 있습니다.

당신은 각각의 플러그인 기능을 참조하려면modal.js를 참조 할 필요가있다.또는, 부트 스트랩 플러그인 개요 장에서는 언급, 당신은bootstrap.js또는bootstrap.min.js의압축 된 버전을 참조 할 수있습니다.

용법

당신은 모달 상자 숨겨진 콘텐츠를 전환 할 수 있습니다 (모달) 플러그인 :

데이터 속성을 통해 : 전환하기 위해 특정 모드를 지정하려면, 설정하고 데이터를 대상 = "# 식별자"(예: 버튼이나 링크 등) 컨트롤러 요소에"모달"또는HREF = "#식별자"=데이터 토글의 속성을 설정 상태 상자 (ID = "식별자"포함).
자바 스크립트 작성자 :이 기술을 사용하면, 당신은 자바 스크립트의 간단한 라인으로의 아이디 = "식별자"와 모달 상자를 호출 할 수 있습니다 :
```
$ ( '# 식별자'). 모달 (옵션)
```

예

정적 모달 윈도우 인스턴스는 다음 예와 같이

예

»시도

결과는 다음과 같다 :

코드 설명 :

모달 창, 당신은 트리거의 일종이 필요합니다. 당신은 버튼이나 링크를 사용할 수 있습니다. 여기에서 우리는 버튼을 사용하고 있습니다.
위의 코드를 자세히 보면, 당신은 <버튼>태그, 데이터 대상 = "#의 myModal에서 찾을 것은 " 당신이 페이지 모달 상자에로드 할 목표입니다.당신은 페이지에 여러 모달 상자를 만든 다음 모달 상자의 각각에 대해 서로 다른 트리거를 만들 수 있습니다. 이제, 분명히, 당신은 동시에 여러 개의 모듈을로드 할 수 없습니다,하지만 당신은 페이지에 서로 다른 시간에 여러로드를 생성 할 수 있습니다.
모달주의해야 할 두 가지를 상자 :
1. 의 <div> 내용 모달 상자를 인식하기위한 첫번째는, .modal입니다.
2. 두 번째는.fade 클래스입니다.모달 상자가 전환 될 때, 내용물은 페이드가 발생할 것이다.
아리아 - labelledby = "myModalLabel", 속성 참조 모달 상자 제목.
트리거 (예 : 해당 버튼을 클릭 등) 해고 될 때까지 부동산의아리아 - 숨겨진 모달 창을 유지 = "진정한"는표시되지 않습니다.
<사업부 클래스 = "모달 헤더">, 모달 헤더가 정의 머리 스타일 모달 창 클래스.
클래스 = "가까이"가까이는 CSS 클래스입니다, 모달 창 닫기 버튼의 스타일을 설정하는 데 사용됩니다.
데이터는-기각 "모달"= HTML5 데이터 속성은 정의입니다.어디는 모달 창을 닫으하는 데 사용됩니다.
클래스 = "모달 몸은"주 모달 창으로 설정 스타일에 대한 CSS 클래스 부트 스트랩 CSS입니다.
클래스 = "모달 - 바닥 글", 모달 창 하단 스타일링을위한 CSS 클래스 부트 스트랩 CSS입니다.
데이터 토글 = "모달", HTML5의 사용자 정의 데이터는 모달 창을 엽니 데이터 토글 때문이다.

옵션

전달하는 데이터의 속성이나 자바 스크립트에 의해 얻어진다 모달 창 (모달 창) 모양과 느낌을 사용자 정의하는 데 사용할 수있는 몇 가지 옵션이 있습니다. 다음 표에서는 이러한 옵션을 나열합니다 :

选项名称	类型/默认值	Data 属性名称	描述
backdrop	boolean 或 string 'static' 默认值：true	data-backdrop	指定一个静态的背景，当用户点击模态框外部时不会关闭模态框。
keyboard	boolean 默认值：true	data-keyboard	当按下 escape 键时关闭模态框，设置为 false 时则按键无效。
show	boolean 默认值：true	data-show	当初始化时显示模态框。
remote	path 默认值：false	data-remote	使用 jQuery.load方法，为模态框的主体注入内容。如果添加了一个带有有效 URL 的 href，则会加载其中的内容。如下面的实例所示： <a data-toggle="modal" href="remote.html" data-target="#modal">请点击我</a>

방법

여기에 함께 사용되는 유용한 방법 및 모달은 ()이다.

方法	描述	实例
Options:.modal(options)	把内容作为模态框激活。接受一个可选的选项对象。	$('#identifier').modal({ keyboard: false })
Toggle:.modal('toggle')	手动切换模态框。	$('#identifier').modal('toggle')
Show:.modal('show')	手动打开模态框。	$('#identifier').modal('show')
Hide:.modal('hide')	手动隐藏模态框。	$('#identifier').modal('hide')

예

다음의 예는 상기 방법을 보여

예

<! - 모달 상자 (모달) -> <사업부 클래스 = "모달 페이드" ID = "myModal" 모두 tabIndex = "-1" 역할 = "대화" 아리아 - labelledby = "myModalLabel" > = "true"로 아리아 숨겨진 <사업부 클래스 = "모달-대화"> <사업부 클래스 = "모달 콘텐츠"> <사업부 클래스 = "모달 헤더"> <버튼 = "버튼"을 입력 클래스 = "근접" = "모달"데이터 기각 아리아 숨겨진 = "진정한"> × </ 버튼> <H4 클래스 = "모달 제목" ID = "myModalLabel"> 모달 상자 (모달) 제목 </ H4> </ DIV> <사업부 클래스 = "모달 몸">를 눌러 ESC 버튼을 종료합니다. </ DIV> <사업부 클래스 = "모달 - 바닥 글"> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-기본" 데이터가-기각 = "모달"> 닫기 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차" > 변경 사항 제출 </ 버튼> </ DIV> </ DIV> <! - /.modal-content -> </ DIV> <! - /.modal-dialog -> </ DIV> <! - /.modal -> <script> $ (함수 () {$ ( '#의 myModal') 모달 ({키보드 :. 트루})}); </ script>

»시도

결과는 다음과 같다 :

그냥 ESC 키를 클릭 모달 창은 종료된다.

행사

다음 표는 모달 상자를 사용할 수있는 이벤트를 나열합니다. 이러한 이벤트시 후크 함수를 사용할 수있다.

事件	描述	实例
show.bs.modal	在调用 show 方法后触发。	$('#identifier').on('show.bs.modal', function () { // 执行一些动作... })
shown.bs.modal	当模态框对用户可见时触发（将等待 CSS 过渡效果完成）。	$('#identifier').on('shown.bs.modal', function () { // 执行一些动作... })
hide.bs.modal	当调用 hide 实例方法时触发。	$('#identifier').on('hide.bs.modal', function () { // 执行一些动作... })
hidden.bs.modal	当模态框完全对用户隐藏时触发。	$('#identifier').on('hidden.bs.modal', function () { // 执行一些动作... })

예

다음의 예는 이벤트의 사용법을 보여

예

<! - 모달 상자 (모달) -> <H2> 모달 상자 (모달) 플러그인 이벤트 </ H2> <! - 버튼 모달 상자를 실행하기 -> <버튼 클래스 = "btn을 BTN-차 BTN의 -LG" 데이터 전환 = "모달" 데이터 대상 = "#myModal"> 시작 데모 모달 프레임 </ 버튼> <! - 모달 상자 (모달) -> <사업부 클래스 = "모달 페이드" ID = "myModal" 모두 tabIndex = "-1" 역할 = "대화" 아리아 - labelledby = "myModalLabel" > = "true"로 아리아 숨겨진 <사업부 클래스 = "모달-대화"> <사업부 클래스 = "모달 콘텐츠"> <사업부 클래스 = "모달 헤더"> <버튼 = "버튼"을 입력 클래스 = "근접" = "모달"데이터 기각 아리아 숨겨진 = "진정한"> × </ 버튼> <H4 클래스 = "모달 제목" ID = "myModalLabel"> 모달 상자 (모달) 제목 </ H4> </ DIV> <사업부 클래스 = "모달 몸은"> 이벤트 기능을 확인 닫기 버튼을 클릭합니다. </ DIV> <사업부 클래스 = "모달 - 바닥 글"> <버튼 = "버튼"을 입력 클래스 = "btn을 BTN-기본" 데이터가-기각 = "모달"> 닫기 </ 버튼> <버튼 = "버튼"을 입력 클래스 = "BTN의 BTN-차" > 변경 사항 제출 </ 버튼> </ DIV> </ DIV> <! - /.modal-content -> </ DIV> <! - /.modal-dialog -> </ DIV> <! - /.modal -> <스크립트> $} () 함수 () {$ ( '#의 myModal') 모달 ( '숨기기')});. </ 스크립트> <script> $ (함수 () {$ (( 'hide.bs.modal'에 '#의 myModal'), 함수 () {경고 ( ' 안녕하세요, 모달 상자처럼 당신을 듣고 ...'); })}); </ SCRIPT >

»시도

결과는 다음과 같다 :