Bootstrap 3.3.7 | 경고, 다이어로그, 접기 | 모달 다이어로그(modal-dialog)

경고는 어디까지나 콘텐츠에 메시지로 삽입되는 것이었다면, “다이어로그"는 화면 위에 다른 창으로 뭔가를 표시하기 위해 사용된다. 이는 “대화 상자"라고도 한다.

모달 다이어로드

다이어로그는 조금 복잡한 태그 구조이다. 경고(alert)와 동일하게, 사전에 표시하는 다이어로그 내용을 HTML 태그로 작성해서 준비두고, 이것을 버튼 클릭 등으로 표시하는 방식이다. 우선은 다이어로그의 태그 구조를 정리하면 아래와 같다.

<div class="modal fade" id="다이어로그 아이디" role="dialog"  aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                ……헤더 표시……
            </div>
            <div class="modal-body">
                ……바디 표시……
            </div>
            <div class="modal-footer">
                ……풋터 표시……
            </div>
        </div>
    </div>
</div>

매우 복잡하고 이해하기 어려울 수 있다. 좀 더 알기 쉽게 정리하자면, 아래와 같은 구조로 되어있는 것을 알 수 있다.

대화 전체

<div class="modal-dialog">

컨텐츠 부분

<div class="modal-content">

헤더, 바디, 풋터

<div class="modal-header">
<div class="modal-body">
<div class="modal-footer">

다이어로그는 class="modal-dialog"를 지정한 <div> 태그로 만든다. 그 안에 내용을 보면 class="modal-content"태그를 제공하고, 더불어 그 안에 헤더, 바디 및 풋터 태그를 준비하여 내용을 작성한다. 이 구성이 다이어로그의 기본형으로 생각할 수 있다.

다이어로그 열기(open) 및 닫기(close)

다이어로그는 단지 표시 태그를 준비한 것만으로는 사용할 수 없다. 다이어로그를 호출하여 표시하거나 닫을 수 있는 구조도 준비해야 한다.

다이어로그 열기

다이어로그를 열려면 <a> 태그를 이용한다. 이것은 아래와 같은 형태가 된다.

<a href="다이어로그의 지정" data-toggle="modal"> ...... </a>

href에서 여는 다이어로그 <div> 태그를 지정한다. 이는 ID를 사용하여 지정하면 된다. 태그에는 data-toggle="modal"라는 속성을 지정한다. 그러면 href에 지정된 ID의 다이어로그가 표시되게 된다.

다이어로그 닫기

대화를 닫으려면 이것도 <a> 태그를 사용한다. 이는 다이어로그의 태그(일반적으로 풋터 태그)에 제공한다.

<a href="#" data-dismiss="modal"> ...... </a>

속성으로 data-dismiss = “modal"을 사용할 수 있어야합니다. 그러면 자동으로 대화 상자를 닫을 수 있습니다.

그럼 실제로 간단한 대화를 호출 예제를 보도록 하자.

<!DOCTYPE html>
<html lang="ko">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Bootstrap</title>
 
    <script src="./js/jquery-3.1.1.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
     
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/bootstrap-theme.min.css">
 
</head>
<body >
     
<div class="container">
             
<div class="row">
    <div class="col-md-12">
         
        <div class="page-header">
            <h1>경로, 다이어로그</h1>
            <h2 >다이어로그</h2>
        </div>
         
        <a href="#dialog" role="button" class="btn btn-default" data-toggle="modal">Show Dialog</a>
             
        <div class="modal fade" id="dialog" role="dialog" aria-labelledby="dlogLabel" aria-hidden="true">
 
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                         <h4 class="modal-title" id="dlogLabel">
                            Dialog!
                        </h4>
                    </div>
                    <div class="modal-body">
                        이것은 다이어로그의 메세지입니다.
                    </div>
                    <div class="modal-footer">
                        <a href="#" role="button" class="btn btn-default" data-dismiss="modal">Close</a> 
                    </div>
                </div>
                 
            </div>
             
        </div>
 
    </div>
</div>
     
</div>
 
</body>
</html>

여기에서 “Show Dialog"버튼을 클릭하면 다이어로그가 나타난다. 다이어로그의 “Close"버튼을 클릭하면 다이어로그가 닫힌다.