Shopify popup search box with overlay

block-search.liquid

{% comment %}

    A snippet to include a search bar anywhere in your theme.
    Note we are using 'input-group' for the layout. Look under Forms > Input Groups for some demos.

    More information:
    - http://docs.shopify.com/themes/liquid-variables/search

    To return only products in results:
    - http://docs.shopify.com/manual/configuration/store-customization/return-only-product-in-storefront-search-results
    - Or manually add type=product to the search URL as a query parameter
    - Uncomment hidden input with value="product" below

{% endcomment %}

<style>
.close-overlay {
    z-index: 99999;
    position: relative;
    cursor: pointer;
    font-size: 26px;
    color: #fff;
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -ms-transform: scale(0);
    -o-transform: scale(0);
    -webkit-transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    display: inline-block;
    position: fixed;
    top: 30px;
    right: 35px
}

.close-overlay.active {
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -ms-transform: scale(1);
    -o-transform: scale(1)
}

.over-layer {
    -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    width: 60px;
    height: 60px;
    position: fixed;
    top: -60px;
    left: 50%;
    margin-left: -30px;
    z-index: 9998
}

.over-layer:before {
    content: "";
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(53,51,51,0.98);
    -webkit-border-radius: 100%;
    -moz-border-radius: 100%;
    -ms-border-radius: 100%;
    -o-border-radius: 100%;
    border-radius: 100%;
    -webkit-transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 9999
}

.over-layer.active:before {
    -webkit-transform: scale(75);
    -moz-transform: scale(75);
    -ms-transform: scale(75);
    -o-transform: scale(75)
}

.block-form {
    z-index: 9999;
    position: fixed;
    display: table;
    width: 100%;
    height: 100%;
    right: -20%;
    top: 0;
    visibility: hidden;
    opacity: 0;
    filter: alpha(opacity=0);
    -webkit-transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition: all 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94)
}

.block-form.active {
    right: 0;
    opacity: 1;
    filter: alpha(opacity=100);
    visibility: visible
}

form#searchbox {
    margin-top: 23%
}

form#searchbox input[type="search"]::-webkit-input-placeholder {
    color: #fefefe
}

form#searchbox input[type="search"]::-moz-input-placeholder {
    color: #fefefe
}

form#searchbox input[type="search"]::-ms-input-placeholder {
    color: #fff
}

form#searchbox input[type="search"] {
    color: #fefefe
}

form#searchbox input.input-search {
    padding: 0;
    width: 100%;
    height: 70px;
    max-width: inherit;
    font-size: 20px;
    color: #fefefe;
    font-weight: 400;
    padding: 0;
    border: none;
    border-bottom: 1px solid #858585;
    background-color: transparent;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: left;
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    -ms-border-radius: 0;
    -o-border-radius: 0;
    border-radius: 0
}

form#searchbox input.input-search:focus {
    -webkit-box-shadow: none;
    box-shadow: none
}

form#searchbox .search_button {
    height: 70px;
    font-size: 20px;
    font-weight: 700;
    padding: 0 20px;
    color: #fefefe;
    background-color: transparent;
    text-transform: uppercase;
    position: absolute;
    border: none;
    right: 0;
    -webkit-box-shadow: none;
    box-shadow: none;
    float: left
}

form#searchbox .search_button span {
    display: none
}

form#searchbox .search_button:hover {
    color: #b0896c;
    border: none
}
</style>

<a href="#" title="{{ 'general.search.submit' | t }}" class="searchBtn"><i class="fa fa-search"></i></a>


  	<span class="close-overlay"><i class="fa fa-close"></i></span>
  	<div class="over-layer"></div>
  	<div class="block-form clearfix">
		<form id="searchbox{{ block-search }}" class="container" action="/search" method="get">      
		    <input type="hidden" name="type" value="product">      
		    <input id="search_query_top" class="form-control input-search" size="35" type="search" name="q" value="{{ search.terms | escape }}" placeholder="{{ 'general.search.placeholder' | t }}" aria-label="{{ 'general.search.placeholder' | t }}">
		    <button class="search_button btn-outline-inverse" type="submit" >  
              <i class="fa fa-search"></i>
		    </button>
		</form>
		<div id="ap-ajax-search" class="hidden-sm hidden-xs container"><ul class="list-unstyled aps-results"></ul></div>
  	</div>


<script type="text/javascript">
	$(document).ready( function(){
	 		$(".searchBtn").click( function(){
	 			$(".over-layer,.block-form,.close-overlay").addClass('active');
	 		});
 		$('.close-overlay').click(function(){
			$(".over-layer,.block-form,.close-overlay").removeClass('active');
 		});
     
 });
</script>