Hướng dẫn làm modal không dùng Bootstrap hay thư viện

1.Tạo khung HTML

    <!-- Trigger/Open The Modal -->
<button id="openModal"&gt;Open Modal</button>
    <!-- Trigger/Open The Modal -->
<!-- The Modal -->



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

    <!-- Modal content -->
    


<div class="modal-content">
        &lt;span class="close">;&amp;times;</span>
        

Some text in the Modal..

    </div>



    <!-- Modal content -->
<!-- The Modal -->
</div>

Ở đây mình tạo môt nút openModal dùng để nhấn mở modal có id là myModal và nội dung thì sẽ để trong thẻ div có class là modal-content.

2.Style Css cho khung Html

 
 /* The Modal (background) */

.Form__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 w/ opacity */
}
 /* The Modal (background) */

/* Modal Content */

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
}
/* Modal Content */


/* 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;
}
/* The Close Button */

3.Tạo chức năng và hiệu ứng đóng mở modal với JS

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("openModal");

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

Ở đây đoạn JS này đóng mở modal thông qua display:none và display:block tuy nhiên người dùng sẽ không cảm nhận được hiệu ứng đóng mở vì tác vụ đóng mở không bị delay bởi thời gian và không nhìn rõ bằng mắt được. Nên ở đây mình thêm một hàm JS để tác vụ đóng mở sẽ trở nên đẹp hơn và chậm hơn.

 
 // in meaning open
 // out meaning close
function fade(frame, time, option) {
        if (option === "in") {
            modal.style.display = "block";
            var pos = 0;
            var id = setInterval(effect, frame);

            function effect() {
                if (pos == time) {
                    clearInterval(id);
                } else {
                    pos++;
                    modal.style.opacity = pos / time;
                }
            }
        } else if (option === "out") {
            var pos = time;
            var id = setInterval(effect, frame);

            function effect() {
                if (pos == 0) {
                    clearInterval(id);
                    modal.style.display = "none";
                } else {
                    pos--;
                    modal.style.opacity = pos / time;
                }
            }
        }

    }

Ở đây mình có một function truyền 3 thông số param vào là frame, time, option. Mình sẽ nói về option trước , option có 2 chế độ in và out. in là chế độ mở modal còn out là chế độ đóng modal.
Thông số frame là thời gian delay cho một chuyển động liên tiếp trong hàm hiệu ứng. Thống số time là thời gian cho toàn bộ hiệu ứng. Time càng cao thì hiệu ứng diễn ra càng lâu.
Và chúng ta sử dụng hàm đó như sau:

// Get the modal
var modal = document.getElementById("myModal");

// Get the button that opens the modal
var btn = document.getElementById("openModal");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

    // Set up amination 
    function fade(frame, time, option) {
        if (option === "in") {
            modal.style.display = "block";
            var pos = 0;
            var id = setInterval(effect, frame);

            function effect() {
                if (pos == time) {
                    clearInterval(id);
                } else {
                    pos++;
                    modal.style.opacity = pos / time;
                }
            }
        } else if (option === "out") {
            var pos = time;
            var id = setInterval(effect, frame);

            function effect() {
                if (pos == 0) {
                    clearInterval(id);
                    modal.style.display = "none";
                } else {
                    pos--;
                    modal.style.opacity = pos / time;
                }
            }
        }

    }
    // When the user clicks the button, open the modal 
    btn.onclick = function() { fade(1, 100, "in"); }

    // When the user clicks on <span> (x), close the modal
    span.onclick = function() { fade(1, 100, "out"); }

    // When the user clicks anywhere outside of the modal, close it
    window.onclick = function(event) {
        if (event.target == modal) { fade(1, 100, "out"); }
    }