How TO - CSS/JS Modal

CSS 및 JavaScript로 모달 박스를 만드는 방법을 학습합니다.

모달은 현재 페이지의 맨 위에 표시되는 대화 상자 / 팝업 창입니다.

Step 1) Add HTML:

<h2>Modal Example</h2>
    <!-- Trigger/Open The Modal -->
    <button id="myBtn">Open Modal</button>
    <!-- The Modal -->
    <div id="myModal" class="modal">
        <!-- Modal Content -->
        <div class="modal-content">
            <span class="close">&times;</span>
            <p>Strike while the iron is hot!</p>
        </div>
    </div>

Step 2) Add CSS:

<style>
        body {font-family: Arial, Helvetica, sans-serif;}
        /* The Modal (background) */
        .modal {
            display: none;      /* Hidden by default */
            position: fixed;    /* Stay in place */
            z-index: 1;         /* Sit on top */
            padding-top: 100px; /* Location of the box  */
            left: 0;
            top: 0;
            width: 100%;        /* Full width */
            height: 100%;       /* Full height */
            overflow: auto;     /* Enable scroll if needed */
            background-color: rgb(0, 0, 0);         /* Fallback color */
            background-color: rgba(0, 0, 0, 0.4);   /* Black with opacity */
        }
        /* Modal Content */
        .modal-content {
            background-color: #fefefe;
            margin: auto;
            padding: 20px;
            border: 1px solid #888;
            width: 80%;
        }
        /* The Close Button */
        .close {
            color: #aaaaaa;
            float: right;
            font-size: 28px;
            font-weight: bold;
        }
        .close:hover,
        .close:focus {
            color: #000;
            text-decoration: none;
            cursor: pointer;
        }
    </style>

Step 3) Add JavaScript:

    <script>
        // Ger the modal
        var modal = document.getElementById("myModal");
        // Get the button that opens the modal
        var btn = document.getElementById("myBtn");
        // Get the <span> element that closes the modal
        var span = document.getElementsByClassName("close")[0];
        // When the user clicks the button, open the modal
        btn.onclick = function () {
            modal.style.display = "block";
        }
        // When the user clicks on <span> (x), close the modal.
        span.onclick = function () {
            modal.style.display = "none";
        }
        // When the user clicks anwhere outside of the modal, close it.
        window.onclick = function (event) {
            if (event.target == modal) {
                modal.style.display = "none";
            }
        }
    </script>

modal-header, modal-body, modal-footer를 위한 클래스를 추가합니다.

modal 헤더, 바디 그리고 풋터에 스타일을 지정하고 modal에 애니메이션 슬라이드를 추가합니다.

하단에서 슾라이드 되는 화면 전체 너비의 모달을 생성하는 방법에 관한 예제