Ví dụ

<button id="myBtn" type="button">Open Modal</button>
<div class="modalContainer">
    <div class="contentModal">
        <div class="modalHeader">
            <h1>Modal Header</h1>
            <span id="mySpan" title="Close Modal">&times;</span>
        </div>
        <div class="modalText">
            <p>Hello modal!</p>
            <p>Nội dung text modal ở đây.</p>
        </div>
        <div class="modalFooter">
            <h2>Modal Footer</h2>
        </div>
    </div>
</div>

Ví dụ

/* Tạo kiểu cho nút button */
#myBtn {
    border:none;
    outline:none;
    padding:10px 20px;
    background-color:black;
    color:white;
    cursor:pointer;
    border-radius:5px;    
}
#myBtn:hover {
    background-color:dodgerblue;    
}
/* Tạo kiểu cho vùng chứa modal */
.modalContainer {
    position:fixed; /* Cố định */
    top:0; 
    left:0;
    right:0;
    bottom:0;
    background-color:black;
    background-color:rgba(0,0,0,0.3);
    z-index:999;
    display:none; /* Ẩn theo mặc định ban đầu */    
}
/* Modal chính hiển thị */
.modalContainer .contentModal {
    width:50%; /* Rộng 50% */
    box-shadow:0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Tạo kiểu cho nội dung bên trong hộp modal */
.modalContainer .contentModal .modalHeader, .modalContainer .contentModal .modalFooter {
    padding:5px 20px;
    background-color:orange;
    color:white;
    position:relative;    /* Định vị tương đối */
}
.modalContainer .contentModal .modalText {
    padding:15px 20px;    
    background-color:white;
}
/* Tạo kiểu cho thẻ span làm nút đóng modal */
.modalContainer .contentModal .modalHeader #mySpan {
    position:absolute; /* Định vị tuyệt đối */
    font-size:35px;
    color:white;
    top:0;
    right:0;
    display:inline-block;
    padding:10px 20px;    
    cursor:pointer;
}
.modalContainer .contentModal .modalHeader #mySpan:hover {
    color:red;    
}
/* Hiệu ứng hộp modal chạy từ trên xuống */
@keyframes onTop {
    from {margin:-100% auto; opacity:0;}
    to {margin:10% auto; opacity:1;}    
}
/* Hiệu ứng hộp modal chạy lên khi đóng */
@keyframes backTop {
    from {margin:10% auto; opacity:1;}
    to {margin:-100% auto; opacity:0;}    
}
/* Hiệu ứng rõ dần cùng chứa hộp modal */
@keyframes fadeIn {
    from {opacity:0;}
    to {opacity:1;}    
}

Ví dụ

<script>
// Khai báo các biến và lấy giá trị
var myBtn, mySpan, x, y;
myBtn = document.getElementById('myBtn');
mySpan = document.getElementById('mySpan');
x = document.getElementsByClassName('modalContainer')[0];
y = document.getElementsByClassName('contentModal')[0];

// Gán sự kiện click mở hộp modal cho nút button
myBtn.onclick = function() {
    x.style.display = "block";
    x.style.animation = "fadeIn 0.4s"; // Vùng chứa hộp modal rõ dần lên
    y.style.animation = "onTop 0.4s"; // Hộp modal chạy từ trên xuống
    y.style.margin = "10% auto";
}

// Click vào nút span sẽ đóng hộp modal
mySpan.onclick = function() {
    y.style.animation = "backTop 0.8s"; // Hộp modal chạy từ dưới lên
    y.style.margin = "-100% auto";    
    
    // Ẩn toàn bộ vùng chứa hộp modal
    setTimeout(function() {
        x.style.display = "none";    
    },150);
}

// Click vào bất kỳ vị trí bên ngoài sẽ đóng hộp modal
window.onclick = function(e) {
    if(e.target == x) {
        y.style.animation = "backTop 0.5s";
        y.style.margin = "-100% auto";    
        setTimeout(function() {
            x.style.display = "none";    
        },150);
    }
}
</script>

Xem kết quả