Hiệu ứng Overlay

Trong bài thực hành này, chúng ta sẽ tạo hiệu ứng hiển thị phần tử overlay bằng HTML, CSS và JavaScript.

Hiệu ứng Overlay


Click vào nút button bên dưới để hiển thị lớp Overlay.

My Overlay

Click anywhere to Close this Overlay

 

Xem kết quả

Cách tạo hiệu ứng Overlay


Bước 1) Thêm HTML:

Ví dụ

<div class="myOverlay" title="Click anywhere to close Overlay">
    <div class="overlay">
        <h1>My Overlay</h1>
        <p>Click anywhere to Close this Overlay</p>
    </div>
</div>

Bước 2) Thêm CSS:

Ví dụ

/* Tạo kiểu cho nút button */
#myBtn {
    border:none;
    outline:none;
    padding:10px 20px;
    background-color:dodgerblue;
    color:white;
    border-radius:6px;    
    font-size:18px;
    -webkit-user-select:none;
    cursor:pointer;
}
#myBtn:hover {
    background-color:orange;    
}
/* Vùng chứa overlay */
.myOverlay {
    position:fixed;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:rgb(0,0,0);
    background-color:rgba(0,0,0,0.3);
    z-index:999 !important;
    display:none;
    -webkit-animation:opacity 1s;
}
/* Phần nội dung */
.myOverlay > .overlay {
    position:absolute;
    top:50%;
    left:50%;
    -webkit-transform:translate(-50%,-50%);
    color:white;
    text-align:center;    
    font-size:20px;
}
.myOverlay > .overlay > * {
    padding:10px 15px;
    background-color:black;
}
/* Định nghĩa hiệu ứng */
@keyframes opacity {
    from { opacity:0;}
    to { opacity:1;}    
}
@-webkit-keyframes opacity {
    from { opacity:0;}
    to { opacity:1;}    
}

Bước 3) Thêm JavaScript:

Ví dụ

<script>
myOverlay();

/* Định nghĩa hàm hiển thị overlay */
function myOverlay() {
    var myBtn, myOverlay;
    myBtn = document.getElementById('myBtn');
    myOverlay = document.getElementsByClassName('myOverlay')[0];
    myBtn.onclick = function() {
        myOverlay.style.display = "block";    
    }
    
    window.onclick = function() {
        var e = window.event;
        if(e.target == myOverlay) {
            myOverlay.style.display = "none";
        }
    }
}
</script>

Xem kết quả