Cara Membuat Modal Box Dengan HTML CSS dan Javascript

Hallo sahabat Dumet bertemu lagi dengan saya dalam artikel tips dan trik, sekarang saya akan membuat modal box, nah sebenarnya modal box ini sering ditemukan dalam sebuah website yang berisi tentang sebuah pesan atau pemberitahuan aktivitas selanjutnya yang harus dilakukan oleh pengunjung atau biasa disebut alert. Baiklah supaya tidak bingung bagaimana cara membuat modal box dengan html css dan javascript .

Sekarang sahabat bisa mengikuti langkah-langkah berikut :

Langkah pertama siapkan file html terlebih dahulu coba mengetikan sintax dibawah ini :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Membuat Modal Box Dengan HTML CSS dan Javascript</title>
  
</head>
<body>
    <div class="box-wrapper">
      <a href="" class="btn teken">Touch Here !</a>
    </div>

    <div class="modal-wrapper">
      <div class="modal">
        <div class="head">
        <a href="" class="btn-close teken">
          <i class="fa fa-times"></i>
        </a>
        </div>
        <div class="content">
          <div class="good-job">
            <i class="fa fa-thumbs-o-up"></i>
            <h1>This Like</h1>
          </div>
        </div>
      </div>
    </div>

  </body>
</html>

Langkah ke dua sahabat tambahkan CSS ketikan seperti berikut

html,body{
  width: 100%;
  height: 100%;
  margin: 0;
}

.box-wrapper{
  width: 100%;
  height: 100%;
  background: #898989;
}

.blur-it{
  filter:blur(4px);
}

a.btn{
  width: 200px;
  padding: 18px 0;
  position: absolute;
  top:50%;
  left:50%;
  font-family: serif;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  text-transform: uppercase;
  color: #fff;
  background: #00ff77;
  border-radius: 5px;
  transform: translate(-50%, -50%);
}

.modal-wrapper{
  width: 100%;
  height: 100%;
  position: fixed;
  top:0;
  left:0;
  background: rgba(41,171,164,0.8);
  visibility: hidden;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open{
  opacity: 1;
  visibility: visible;

}

.modal{
  width: 600px;
  height: 400px;
  display: block;
  margin: 50% 0 0 -300px;
  position: relative;
  top:50%;
  left:50%;
  background: #fff;
  opacity: 0;
  transition: all 0.5s ease-in-out;
}

.modal-wrapper.open .modal{
  margin-top: -200px;
  opacity: 1;
}

.head{
  width: 90%;
  height: 32px;
  padding: 12px 30px;
  overflow: hidden;
  background: #00ff77;
}

.btn-close{
  font-size: 28px;
  display: block;
  float: right;
  color: #fff;

}

.content{
  padding: 10%;
}

.good-job{
  text-align: center;
  font-family: serif;
  color: #000ed1;
}

.good-job .fa-thumbs-o-up{
  font-size: 60px;
}

.good-job h1{
  font-size: 45px;
}

Sahabat bisal lihat gambar dibawah ,ketikan link untuk FontAwesome serta Plugin Jquery nya.

Serta sahabat bisa langsung menambahkan script untuk Javascript yang akan digunakan berikut sintax nya:

<script>
    $(document).ready(function() {
      $('.teken').on('click', function(){
        $('.modal-wrapper').toggleClass('open');
          $('.box-wrapper').toggleClass('blur-it');
          return false;
      })
    });
  </script>

Jika sudah selesai bisa disave lalu jalankan pada browser masing-masing maka tampilan akan seperti gambar berikut

Jadi saat tombol touch here maka akan muncul modal box yang berisi icon like.

Sampai disini dulu penjelasan tentang cara membuat modal box dengan html css dan javascript , sampai bertemu lagi dengan tips dan trik lainnya .

semoga bermanfaat dan selamat mencoba.