Đăng nhập
Bạn chưa có tài khoản? Đăng ký.
Bạn đã quên password?
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.
Click vào nút button bên dưới để hiển thị lớp 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>