Click show div search mới - mobi

 

**** 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;

}