**** HTML
<input type="text" placeholder="Tìm kiếm sản phẩm" class="mbipro-search form-control" id="openSearch">
-> click show qua div mới
<div id="searchOverlay">
<div class="flex mbiflex">
<div class="search-header" id="closeSearch">
<i class="fa fa-angle-left" aria-hidden="true"></i>
</div>
<div class="search-body">
<input type="text" placeholder="Nhập từ khóa..." class="search-input">
<button class="btn-search">
<i class="fa fa-search"></i>
</button>
</div>
</div>
</div>
**** JS
<script>
$(document).ready(function(){
$("#openSearch").focus(function(){
$("#searchOverlay").addClass("active");
setTimeout(function(){
$("#searchInput").focus();
},100);
});
$("#closeSearch").click(function(){
$("#searchOverlay").removeClass("active");
});
});
</script>
**** CSS
#searchOverlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff;
z-index: 9999;
display: none;
flex-direction: column;
}
#searchOverlay.active {
display: flex;
}
.search-header {
color: #888;
font-size: 25px;
}
#closeSearch {
background: none;
border: none;
font-size: 30px;
cursor: pointer;
}
.mbiflex {
display: flex;
align-items: center;
gap: 10px;
padding: 10px;
}
.search-body {
position: relative;
flex: 1;
}
.search-input {
width: 100%;
height: 45px;
padding: 0 15px;
border: 1px solid #ddd;
border-radius: 30px;
font-size: 16px;
}
#searchOverlay {
opacity: 0;
transition: 0.3s;
}
#searchOverlay.active {
display: flex;
opacity: 1;
}
.btn-search {
position: absolute;
top: 50%;
right: 10px;
transform: translateY(-50%);
border: none;
background: none;
cursor: pointer;
color: #888;
font-size: 18px;
}
