Cách thực hiện - Tìm kiếm toàn màn hình
Tìm hiểu cách tạo hộp tìm kiếm toàn màn hình bằng CSS và JavaScript.
Cách tạo Hộp tìm kiếm Toàn màn hình
Bước 1) Thêm HTML:
Thí dụ
<div id="myOverlay" class="overlay">
<span class="closebtn" onclick="closeSearch()"
title="Close Overlay">x</span>
<div class="overlay-content">
<form action="action_page.php">
<input
type="text" placeholder="Search.." name="search">
<button type="submit"><i class="fa fa-search"></i></button>
</form>
</div>
</div>
Bước 2) Thêm CSS:
Thí dụ
/* The overlay effect with black background */
.overlay {
height: 100%;
width: 100%;
display: none;
position:
fixed;
z-index: 1;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9); /* Black with a little bit see-through */
}
/* The content */
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
/* Close button */
.overlay .closebtn {
position: absolute;
top: 20px;
right: 45px;
font-size: 60px;
cursor: pointer;
color: white;
}
.overlay .closebtn:hover {
color:
#ccc;
}
/* Style the search field */
.overlay input[type=text] {
padding: 15px;
font-size:
17px;
border: none;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
/* Style the submit button */
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}
Bước 3) Thêm JavaScript:
Sử dụng JavaScript để bật và tắt hiệu ứng lớp phủ / toàn màn hình:
Thí dụ
// Open the full screen search box
function openSearch() {
document.getElementById("myOverlay").style.display
= "block";
}
// Close the full screen search box
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}