ในการสร้าง Overlay Effect ด้วย CSS โค้ดมีดังนี้ −
ตัวอย่าง
<!DOCTYPE html> <html> <head> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/fontawesome.min.css"> <style> body { font-family: Arial; } * { box-sizing: border-box; } .showBtn { background: #008b0c; border: none; color:white; padding: 10px 15px; font-size: 20px; cursor: pointer; opacity: 0.8; } .showBtn:hover { opacity: 1; } .overlay { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(0, 0, 0, 0.747); } .overlay .hideBtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: rgb(255, 0, 0); opacity: 0.8; } .overlay .hideBtn:hover { opacity: 1; } .overlay input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .overlay input[type=text]:hover { background: #f1f1f1; } .overlay button { float: left; width: 20%; padding: 15px; background: rgb(54, 21, 241); font-size: 17px; border: none; color:white; cursor: pointer; opacity: 0.8; } .overlay button:hover { opacity: 1; } </style> </head> <body> <div class="overlay" > <span class="hideBtn">×</span> <div class="searchBar"> <form > <button type="submit">Close Overlay</button> </form> </div> </div> <h1>Overlay Effect Example</h1> <button class="showBtn">Turn Overlay On</button> <h2>Click on the above button to try overlay effect</h2> <script> document.querySelector('.hideBtn').addEventListener('click',hideSearch); document.querySelector('.showBtn').addEventListener('click',showSearch); function showSearch() { document.querySelector('.overlay').style.display = "block"; } function hideSearch() { document.querySelector('.overlay').style.display = "none"; } </script> </body> </html>
ผลลัพธ์
โค้ดด้านบนจะแสดงผลดังนี้ −
เมื่อคลิกปุ่ม "Turn Overlay On" −
