Membuat Popup Quick Search Box

by kompiajaib

HTML

<link rel="stylesheet" href="https://cdn.rawgit.com/KompiAjaib/font-awesome-4.6.3/master/css/font-awesome.min.css">
<a href='javascript:void(0)' class='searchbutton' onclick='openSearchbox()' title='Quick Search'></a>


<div class='search-box' id='search_box'>
<div class='inputpoint'>
<script>
  (function() {
    var cx = '006106396690849460662:6ebjomhf_kq';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:searchbox></gcse:searchbox>
</div>
<div class='search-result'>
<gcse:searchresults></gcse:searchresults>
</div>
<div class="close-searchbox" onclick="hidesearchbox()"><span>&#215;</span></div>
</div>
<div id='searchbox-layer'></div>

CSS

.search-box{position:fixed;top:10%;left:20%;right:20%;max-width:879px;background:rgba(255,255,255,1);color:rgba(0,0,0,.6);box-shadow:0 2px 7px rgba(0,0,0,.2);display:none;visibility:hidden;padding-top:54px;}
.search-box.active{display:block;visibility:visible;margin:auto;;z-index:1002;-webkit-animation-name:zoomIn;animation-name:zoomIn;-webkit-animation-duration:1s;animation-duration:1s;-webkit-animation-fill-mode:both;animation-fill-mode:both}
@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
@keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}
50%{opacity:1}
}
.search-box .inputpoint {background:#333;margin:0 auto;padding:10px 12px 6px;position:absolute;top:0;left:0;right:0}
#searchbox-layer{position:fixed;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,.5);display:none;z-index:1001}
.search-box .close-searchbox{cursor:pointer;position:absolute;top:-20px;right:-20px;width:20px;height:20px;padding:0;margin:0;border:0;outline:0;border-radius:100%;font-weight:bold;color:#555;background:#fff;font-size:24px;font-family: Arial;text-align:center;line-height:20px;transition:all .3s;z-index:999}
.search-box .close-searchbox:hover {color:red;}
.search-result .gsc-results-wrapper-visible{max-height: calc(100vh - 200px);overflow-y:auto;margin-bottom:10px}
.searchbutton{text-decoration:none}
.searchbutton:after{content:"\f002";font-family:FontAwesome;font-style:normal;font-weight:700;text-decoration:none;position:relative;}
.gsc-input-box{border-radius:2px}
.gsc-input-box-focus,.gsc-search-box .gsc-input>input:focus{border:1px solid #b9b9b9!important;border-top-color:#a0a0a0!important;-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;box-shadow:inset 0 1px 2px rgba(0,0,0,.1)!important;outline:0!important}
.gsc-results-wrapper-visible{background:#fff;padding:0...

JavaScript

function openSearchbox(){document.getElementById("search_box").classList.toggle("active");document.getElementById("searchbox-layer").style.display = "block";}
function hidesearchbox(){document.getElementById("search_box").classList.toggle("active");document.getElementById("searchbox-layer").style.display = "none";}