Membuat Popup Overlay Search Box

Membuat Popup Overlay Search Box - Hallo semuanya, pada kesempatan kaili ini saya akan membuat senuah fitur yang sangat bisa kalian jadikan referensi untuk website kalian, kali ini kita akan membahas tentan bagaimana cara membuat popup overlay search box dengan sangat mudah.

Struktur HTML

Berikut adalah struktur yang akan kita gunakan untuk membuat sebuah popup overlay search box

myOverlay, sebagai pembungkus utama dari layout form

openBtn, sebagai tombol / trigger untuk membuka overlay search box

<div id="myOverlay" class="overlay">
  <span class="closebtn" onclick="closeSearch()" title="Close Overlay">×</span>
  <div class="overlay-content">
    <form action="">
      <input type="text" placeholder="Search.." name="search">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div>
<h2>Popup Overlay Search Box</h2>
<button class="openBtn" onclick="openSearch()">Open Search Box</button>

Style CSS

Kita menggunakan style css untuk mengatur posisi overlay dan konten overlay search box yang ada di dalamnya

body {
    font-family: Arial;
}
* {
    box-sizing: border-box;
}
.openBtn {
    background: #f1f1f1;
    border: none;
    padding: 10px 15px;
    font-size: 20px;
    cursor: pointer;
}
.openBtn:hover {
    background: #bbb;
}
.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,50, 0.9);
}
.overlay-content {
    position: relative;
    top: 46%;
    width: 80%;
    text-align: center;
    margin-top: 30px;
    margin: auto;
}
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 60px;
    cursor: pointer;
    color: white;
}
.overlay .closebtn:hover {
    color: #ccc;
}
.overlay input[type=text] {
    padding: 15px;
    font-size: 17px;
    border: none;
    float: left;
    width: 80%;
    background: white;
}
.overlay input[type=text]:hover {
    background: #f1f1f1;
}
.overlay button {
    float: left;
    width: 20%;
    padding: 15px;
    background: #ddd;
    font-size: 17px;
    border: none;
    cursor: pointer;
}
.overlay button:hover {
    background: #bbb;
}

Kode Javascript

Untuk membuat efek klik dan mengubah atribut display menjadi muncul / block atau disembunyikan / none

function openSearch() {
    document.getElementById("myOverlay").style.display = "block";
}

function closeSearch() {
    document.getElementById("myOverlay").style.display = "none";
}

Tidak lupa kita juga menggunakan fontawesome untuk icon search dan icon close yang kita gunakan

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

Baiklah teman - teman, demikian artikel kali ini yang membahas tentang bagaimana cara membuat popup overlay search box dengan sangat mudah, sampai jumpa di artikel selanjutnya, semoga bermanfaat, terima kasih