방법 - CSS / JS 모달

CSS와 자바 스크립트 모달 상자를 만드는 방법에 대해 알아 봅니다.

모달 상자를 만드는 방법

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

1 단계) HTML을 추가합니다 :

예

<button id="myBtn">Open Modal</button>


<div id="myModal" class="modal">


<div class="modal-content">
<span class="close">x</span>
<p>Some text in the Modal..</p>
</div>

</div>

2 단계) CSS를 추가 :

예

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    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 w/ opacity */
}

/* Modal Content/Box */
.modal-content {
    background-color: #fefefe;
    margin: 15% auto; /* 15% from the top and centered */
    padding: 20px;
    border: 1px solid #888;
    width: 80%; /* Could be more or less, depending on screen size */
}

/* The Close Button */
.close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

3 단계) 자바 스크립트를 추가합니다

예

// Get 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 on 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 anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}

»그것을 자신을 시도

머리글과 바닥 글을 추가

모달 헤더, 모달 - 몸과 모달-바닥 글에 대한 클래스를 추가 :

예

<div class="modal-content">
<div class="modal-header">
    <span class="close">×</span>
    <h2>Modal Header</h2>
</div>
<div class="modal-body">
    <p>Some text in the Modal Body</p>
    <p>Some other text...</p>
</div>
<div class="modal-footer">
    <h3>Modal Footer</h3>
</div>
</div>

모달 헤더, 몸과 바닥 글을 스타일 및 애니메이션 추가 (slide in the modal) :

예

/* Modal Header */
.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Body */
.modal-body {padding: 2px 16px;}

/* Modal Footer */
.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 80%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}

@keyframes animatetop {
    from {top: -300px; opacity: 0}
    to {top: 0; opacity: 1}
}