Live Code Editor Version 2.0

Hướng dẫn tạo Modal Box với HTML, CSS và Javascript - Demo RUN

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <style>
            .container {
                width: 70%;
                margin: auto;
                text-align: center;
            }
            /* Định dạng phần form đăng nhập*/
            .fomrgroup {
                width: 50%;
                margin: auto;
                display: block;
                height: 50px;
            }
            .fomrgroup input{
                float: right;
                 width: 70%;
                height: 25px;
                margin-right: 20px;
                line-height: 50px;
            }
            .fomrgroup b{
                font-size: 20px;
            }
            /* The Modal (background) */
            .modal {
                display: none; /* mặc định được ẩn đi */
                position: fixed; /* vị trí cố định */
                z-index: 1; /* Ưu tiên hiển thị trên cùng */
                padding-top: 100px; 
                left: 0;
                top: 0;
                width: 100%;
                height: 100%; 
                overflow: auto;
                background-color: rgb(0,0,0); 
                background-color: rgba(0,0,0,0.4); 
            }
             
            /* Modal Content */
            .modal-content {
                background-color: #fefefe;
                margin: auto;
                padding: 20px;
                border: 1px solid #888;
                width: 60%;
            }
             
            /* 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>
    </head>
    <body>
        <div class="container">
 
            <h2>Freetuts.net hướng dẫn tạo Modal Box</h2>
         
            
            <button id="myBtn">Đăng Nhập</button>
         
            
            <div id="myModal" class="modal">
                
                <div class="modal-content">
                    <form action="#">
                        <span class="close">&times;</span>
                        <h2>Form đăng nhập</h2>
                        <div class="fomrgroup">
                            <b>UserName:</b>
                            <input type="text" name="username">
                        </div>
                        <div class="fomrgroup">
                            <b>PassWord:</b>
                            <input type="passWord" name="passWord">
                        </div>
                        <div class="fomrgroup">
                            <button>Đăng nhập</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
        <script>
            // lấy phần Modal
            var modal = document.getElementById('myModal');
         
            // Lấy phần button mở Modal
            var btn = document.getElementById("myBtn");
         
            // Lấy phần span đóng Modal
            var span = document.getElementsByClassName("close")[0];
         
            // Khi button được click thi mở Modal
            btn.onclick = function() {
                modal.style.display = "block";
            }
         
            // Khi span được click thì đ
            span.onclick = function() {
                modal.style.display = "none";
            }
         
            // Khi click ngoài Modal thì đóng Modal
            window.onclick = function(event) {
                if (event.target == modal) {
                    modal.style.display = "none";
                }
            }
        </script>
    </body>
</html>