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

27 Maret 2020

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat