Bootstrap 기본 강의

Bootstrap 플러그인

Bootstrap 드롭다운 메뉴 플러그인 Bootstrap 전환 효과 플러그인

Bootstrap 모달 팝업(Modal) 플러그인

모달 팝업(Modal)은 부모 창 위에 덮여 있는 자식 창입니다. 일반적으로, 부모 창을 떠나지 않고 독립적인 소스에서의 내용을 표시하고, 부모 창을 떠나지 않고 일부 상호작용을 할 수 있는 목적이 있습니다. 자식 창은 정보 제공, 상호작용 등을 제공할 수 있습니다.

이 플러그인의 기능을 단독으로 참조하려면, 다음을 참조해야 합니다 modal.js또는 Bootstrap 플러그인 개요 책의 한 장에서 언급된 것처럼, 다음을 참조할 수 있습니다 bootstrap.js 또는 압축된 버전의 bootstrap.min.js。

사용법

모달 팝업(Modal) 플러그인의 숨겨진 내용을切换할 수 있습니다:

data 속성을 통해제어 요소(예: 버튼이나 링크)에 속성을 설정합니다 data-toggle="modal"또한 설정합니다: data-target="#identifier" 또는 href="#identifier" 특정 모달 팝업(이 ID="identifier"를 가진)을切换하려면 설정합니다.
JavaScript를 통해：使用这种技术，您可以通过简单的一行 JavaScript 来调用带有 id="identifier" 的模态框：
```
$('#identifier').modal(options)
```

온라인 예제

一个静态的模态窗口示例，如下面的示例所示：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 예제　-　模态框(Modal)插件创建模态框(Modal)테스트를 보세요.‹/›

결과는 다음과 같습니다:

代码讲解：

使用模态窗口，您需要有某种触发器。您可以使用按钮或链接。这里我们使用的是按钮。
如果您仔细查看上面的代码，您会发现在
在模态框中需要注意两点：
第一是 .modal，用来把
的内容识别为模态框。
第二是 .fade class。当模态框被切换时，它会引起内容淡入淡出。
aria-labelledby="myModalLabel"，该属性引用模态框的标题。
属性 aria-hidden="true" 用于保持模态窗口不可见，直到触发器被触发为止（比如点击在相关的按钮上）。
<div> modal-header는 모달 창의 머리에 스타일을 정의하는 클래스입니다.
class="close"close는 모달 창의 닫기 버튼에 스타일을 설정하는 CSS class입니다.
data-dismiss="modal"사용자 정의된 HTML5 data 속성. 여기서는 모달 창을 닫는 데 사용됩니다.
class="modal-body"Bootstrap CSS의 하나의 CSS class로, 모달 창의 본문에 스타일을 설정합니다.
class="modal-footer"Bootstrap CSS의 하나의 CSS class로, 모달 창의 하단에 스타일을 설정합니다.
data-toggle="modal"HTML5 사용자 정의된 data 속성 data-toggle을 사용하여 모달 창을 열어줍니다.

옵션

모달 창(Modal Window)의 외관과 감각을 맞추기 위해 사용할 수 있는 몇 가지 옵션이 있습니다. 이러한 옵션들은 data 속성이나 JavaScript를 통해 전달됩니다. 아래 표는 이러한 옵션들을 나열합니다:

옵션 이름	타입/기본 값	Data 속성 이름	설명
backdrop	boolean 또는 문자열 '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>

메서드

아래는 modal()와 함께 사용할 수 있는 유용한 메서드 몇 가지입니다。

메서드	설명	예제
옵션: .modal(options)	내용을 모달로 활성화합니다. 선택 사항 객체를 받아들입니다。	$('#identifier').modal({ keyboard:　false }
Toggle: .modal('toggle')	수동으로 모달을 전환합니다。	$('#identifier').modal('toggle')
Show: .modal('show')	수동으로 모달을 엽니다。	$('#identifier').modal('show')
Hide: .modal('hide')	수동으로 모달을 숨기기。	$('#identifier').modal('hide')

온라인 예제

아래의 예제는 메서드의 사용법을 보여줍니다：

온라인 예제

예제

!DOCTYPE　html>
<html>
<head>
	<meta　charset="utf-8">　
	<title>Bootstrap 예제　-　모달 플러그인 메서드</title>
	<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
	<script　src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script　src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<h2>모달 플러그인 메서드</h2>
<!--　버튼을 클릭하여 모달을 트리거하세요　-->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
	모달을 시작하세요.
</button>
<!--　모달(Modal)　-->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
	<div class="modal-dialog">
		<div class="modal-content">
			<div class="modal-header">
				<button type="button" class="close" data-dismiss="modal"　
						aria-hidden="true">×
				</button>
				<h4　class="modal-title" id="myModalLabel">
					모달(Modal) 제목
				</h4>
			</div>
			<div class="modal-body>
				ESC 버튼을 누르면 나가세요.
			</div>
			<div class="modal-footer">
				<button type="button" class="btn btn-default"　
						data-dismiss="modal">닫기
				</button>
				<button type="button" class="btn btn-primary">
					변경 사항 제출
				</button>
			</div>
		</div><!--　/.modal-content　-->
	</div><!--　/.modal-dialog　-->
</div><!--　/.modal　-->
</body>
</html>

테스트를 보세요.‹/›

결과는 다음과 같습니다:

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 () { 　　//　일부 작업을 수행합니다... }

온라인 예제

다음 예제에서 이벤트의 사용법을 설명합니다:

결과는 다음과 같습니다:

위의 예제와 같이, 만약에 닫기 버튼, 즉 hide 이벤트가 발생하면 경고 메시지가 표시됩니다.

Bootstrap 드롭다운 메뉴 플러그인 Bootstrap 전환 효과 플러그인