Live Code Editor Version 2.0

Hướng dẫn tạo Modal Box với HTML, CSS và Javascript - Thêm CSS 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>

</body>
</html>