Dưới đây là mã để tạo hộp tìm kiếm toàn màn hình bằng CSS và JavaScript:
Ví dụ
<!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; } .overlaySearch { height: 100%; width: 100%; display: none; position: fixed; z-index: 1; top: 0; left: 0; background-color: rgba(132, 150, 155, 0.747); } .searchBar { position: relative; top: 46%; width: 80%; text-align: center; margin-top: 30px; margin: auto; } .overlaySearch .hideBtn { position: absolute; top: 20px; right: 45px; font-size: 60px; cursor: pointer; color: rgb(255, 0, 0); opacity: 0.8; } .overlaySearch .hideBtn:hover { opacity: 1; } .overlaySearch input[type=text] { padding: 15px; font-size: 17px; border: none; float: left; width: 80%; background: white; } .overlaySearch input[type=text]:hover { background: #f1f1f1; } .overlaySearch button { float: left; width: 20%; padding: 15px; background: rgb(54, 21, 241); font-size: 17px; border: none; color:white; cursor: pointer; opacity: 0.8; } .overlaySearch button:hover { opacity: 1; } </style> </head> <body> <div class="overlaySearch" > <span class="hideBtn">×</span> <div class="searchBar"> <form > <input type="text" placeholder="Tìm kiếm tại đây.." "> <button type="submit"><i class="fa fa-search"></i></button> </form> </div> </div> <h1>Ví dụ Tìm Kiếm Toàn Màn Hình</h2> <button class="showBtn">Mở hộp tìm kiếm</button> <h2>Nhấn nút trên để mở hộp tìm kiếm toàn màn hình</h2> <script> document.querySelector('.hideBtn').addEventListener('click',hideSearch); document.querySelector('.showBtn').addEventListener('click',showSearch); function showSearch() { document.querySelector('.overlaySearch').style.display = "block"; } function hideSearch() { document.querySelector('.overlaySearch').style.display = "none"; } </script> </body> </html>
Kết quả
Mã trên sẽ cho ra kết quả như sau:
Khi nhấn nút mở hộp tìm kiếm:
