Tutorial Membuat Fullscreen Modal Search Form

Unknown March 09, 2018 CSS Comment

Hai semuanya, pada tulisan kali ini kita akan belajar membuat fullscreen modal search dengan HTML dan CSS, langsung kita mulai belajar membuatnya.
Langkah Pertama, kita akan menggunakan library icon yaitu Font Awesome, copy dan paste kode dibawah tag <head>.

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

Langkah Kedua, silahkan tulis syntax HTML seperti dibawah ini.

<!-- modal -->
<div class="modal" id="search-modal">
<!-- trigger untuk menutup modal -->
  <span class="btn-close" onclick="closeModal()" title="Close">
    <i class="fa fa-close"></i></span>
    <!-- isi modal -->
  <div class="modal-content">
    <p>Pencarian</p>
    <form action="#">
      <input type="text" placeholder="Cari">
      <button type="submit"><i class="fa fa-search"></i></button>
    </form>
  </div>
</div> <!-- end modal -->
<!-- trigger untuk menampilkan modal -->
<button class="trigger" onclick="openSearch()">
  <i class="fa fa-search"></i> Klik Search</button>

Hasilnya awalnya dapat dilihat pada gambar dibawah ini.

Langkah ketiga, silahkan tulis syntax CSS seperti dibawah ini.

.trigger{
      background-color: #007afa;
      border: none;
      padding: 15px;
      cursor: pointer;
      color:#fff;
      border-radius: 7px;
    }
    .modal{
      width: 100%;
      height: 100%;
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 1;
      background-color: rgba(0, 0, 0, 0.9);
    }
    .modal-content{
      position: relative;
      top: 35%;
      width: 80%;
      text-align: center;
      margin: 30px auto 0;
    }
    .modal-content p{
      font-size: 40px;
      color: #fff;
    }
    .modal .btn-close{
      position: absolute;
      top: 20px;
      right: 45px;
      cursor: pointer;
      color: #fff;
    }
    .modal input[type=text]{
      width: 80%;
      float: left;
      border: none;
      padding: 15px;
      box-sizing: border-box;
    }
    .modal button{
      width: 20%;
      float: left;
      border: none;
      padding: 15px;
      cursor: pointer;
      background-color: #007afa;
      color: #fff;
    }

Langkah keempat, silahkan tulis syntax Java Script seperti dibawah ini.

// fungsi untuk membuka modal search
  function openSearch(){
    document.getElementById('search-modal').style.display = "block";
  }
  // fungsi untuk menutup modal search
  function closeModal(){
    document.getElementById('search-modal').style.display = "none";
  }

Jadi, ketika kita mengklik tombol "Klik Search", maka modalnya akan tampil, contohnya dapat dilihat pada demo berikut.

See the Pen Fullscreen Modal Search by Karis Maulana (@karismaulana) on CodePen.

Demikian cara membuat fullscreen modal search form dengan HTML, CSS, semoga tutorial ini bermanfaat, jika ada pertanyaan mengenai tutorial ini, silahkan tulis komentar anda dibawah.

Terima kasih telah berkunjung.