[Bootsrap] 모달(Modal)

modal-dialog-centered 파우선 포스팅을 하기전 모달에 관련된 정보를 여기를 눌러서 확인 해주세요.

사이트를 내리다 보시면 Live demo라고 있습니다.

위에 파란색 버튼인 Launch demo modal를 눌러주세요.

위와같은 모달이 나오는것을 확인할 수 있습니다.

모달의 기본적인 원리는 모달창과 검은색으로 바꿔주는 DIV를 만들어 숨깁니다.(HIDE)

그런뒤 Z-INDEX를 통해 검은색 배경이 1 모달창이 2로 설정을 해주면 원래 원문은 클릭이 불가능 하게 됩니다.

간단하게 설명을 드리자면 A4용지에 2장의 A4용지를 더 올리는것 입니다.

뭐, 어쩃든 HIDE SHOW하는 거라고 생각하시면 되요 (DISPLAY : NONE)

## HTML을 통한 MODAL 사용 및 해석 ##

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!-- 버튼을 생성한다 해당하는 버튼은 데이터 토글은 모달, 데이터 타겟은 exampleModal의 아이디를 가지는 div 입니다.  -->
<!-- 참고로, class data-target, data-toggle과 같은것은 애트리뷰트 라고 합니다. -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>
 
<!-- class를 통해 모달을 선언하고 투명에서 밝아지는 효과(fade)를 준다. 여기서 가장 중요한거는 id 입니다. 위에 타겟과 동일해야 합니다. #은 아이디 .은 클래스 -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- class를 주목하시면  여기 클레스에 modal-lg, modal-sm을 입력하시면 스몰 모달, 라지 모달로 선언이 가능 합니다. -->
<!-- 위에 설명 예 : <div class="modal-dialog modal-sm" role="document"> -->
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
       <!-- 모달 이름 -->
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <!-- 모달 내용 -->
      </div>
      <div class="modal-footer">
        <!-- data-dismiss="modal"를 통해 모달을 닫을수 있다. -->
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
Colored by Color Scripter
cs

## JQUERY을 통한 MODAL 사용 예제 ##

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE HTML>
<html>
 
<head>
    <meta charset="UTF-8">
    <title>해당하는 페이지 이름</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css">
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>
</head>
 
<body>
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-primary" id="modal_show">
        JQUERY를 이용한 모달 열기
    </button>
 
    <!-- Modal -->
    <div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ...
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-primary" id="close_modal">다른 방식으로 모달 닫기</button>
                </div>
            </div>
        </div>
    </div>
 
    <script>
        $(document).ready(function() {
            $("#modal_show").click(function() {
                $("#exampleModal").modal("show");
            });
 
            $("#close_modal").click(function() {
                $("#exampleModal").modal("hide");
            });
        });
    </script>
</body>
 
</html>
 
Colored by Color Scripter
cs