Bootstrap4 기본 튜토리얼

Bootstrap4 모달 창

모달은 사용자에게 중요한 정보를 제공하거나 사용자가 계속 진행하기 전에 필요한 작업을 수행하기 전에 필요한 확인을 받기 위해 사용되는 대화 상자나 팝업 창입니다. 모달은 사용자에게 세션 초과 등의 경고를 주거나 중요한 데이터를 저장하거나 삭제하는 등의 중요한 작업을 수행하기 전에 최종 확인을 받기 위해 널리 사용됩니다.

Bootstrap 모달 플러그인을 사용하여 매우 지능적이고 유연한 대화 상자를 쉽게 생성할 수 있습니다.

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

모달 팝업 생성 방법

아래의 예제는 제목, 메시지 본문, 사용자 작업 버튼을 포함한 页脚를 가진 간단한 모달 팝업의 기본 구조를 요약합니다. 다음 예제는 간단한 모달 팝업 효과를 생성하는 방법을 설명합니다：

예제

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>모달 팝업 예제</h2>
　　<!--　버튼: 모달 팝업 열기 위해 사용됨　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　모달 팝업 열기
　　</button>
　　　
　　<!--　모달 창　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog">
　　　　　　<div　class="modal-content>
　　　
　　　　　　　　<!--　모달 창 상단　-->
　　　　　　　　<div　class="modal-header>
　　　　　　　　　　<h4　class="modal-title">모달 창 상단</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　모달 창 주체　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　모달 창 내용..
　　　　　　　　</div>
　　　
　　　　　　　　<!--　모달 창 하단　-->
　　　　　　　　<div　class="modal-footer>
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">닫기</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

테스트를 해보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

모달 팝업 사이즈

우리는 .modal-sm 클래스를 사용하여 소 모달 팝업을 생성할 수 있습니다，.modal-lg 클래스를 사용하여 대 모달 팝업을 생성할 수 있습니다。

사이즈 클래스는 <div> 요소의 .modal-dialog 클래스 뒤 :

예제 - 소 모달 팝업

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>모달 팝업 예제</h2>
　　<!--　버튼: 모달 팝업 열기 위해 사용됨　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　모달 팝업 열기
　　</button>
　　　
　　<!--　모달 창　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-sm">
　　　　　　<div　class="modal-content>
　　　
　　　　　　　　<!--　모달 창 상단　-->
　　　　　　　　<div　class="modal-header>
　　　　　　　　　　<h4　class="modal-title">모달 창 상단</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　모달 창 주체　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　모달 창 내용..
　　　　　　　　</div>
　　　
　　　　　　　　<!--　모달 창 하단　-->
　　　　　　　　<div　class="modal-footer>
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">닫기</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

테스트를 해보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

예제 - 대 모달 팝업

!DOCTYPE　html>
<html>
<head>
　　<title>Bootstrap　예제</title>
　　<meta　charset="utf-8">
　　<meta　name="viewport"　content="width=device-width,　initial-scale=1">
　　<link　rel="stylesheet"　href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
　　<script　src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
　　<script　src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
　　<script　src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<div　class="container">
　　<h2>모달 팝업 예제</h2>
　　<!--　버튼: 모달 팝업 열기 위해 사용됨　-->
　　<button　type="button"　class="btn　btn-primary"　data-toggle="modal"　data-target="#myModal">
　　　　모달 팝업 열기
　　</button>
　　　
　　<!--　모달 창　-->
　　<div　class="modal　fade"　id="myModal">
　　　　<div　class="modal-dialog　modal-lg>
　　　　　　<div　class="modal-content>
　　　
　　　　　　　　<!--　모달 창 상단　-->
　　　　　　　　<div　class="modal-header>
　　　　　　　　　　<h4　class="modal-title">모달 창 상단</h4>
　　　　　　　　　　<button　type="button"　class="close"　data-dismiss="modal">×</button>
　　　　　　　　</div>
　　　
　　　　　　　　<!--　모달 창 주체　-->
　　　　　　　　<div　class="modal-body>
　　　　　　　　　　모달 창 내용..
　　　　　　　　</div>
　　　
　　　　　　　　<!--　모달 창 하단　-->
　　　　　　　　<div　class="modal-footer>
　　　　　　　　　　<button　type="button"　class="btn　btn-secondary"　data-dismiss="modal">닫기</button>
　　　　　　　　</div>
　　　
　　　　　　</div>
　　　　</div>
　　</div>
　　
</div>
</body>
</html>

테스트를 해보세요 ‹/›

실행된 후 결과는 다음과 같습니다:

Bootstrap4 팝업 Bootstrap4 스ライ드 쇼