Membuat Kotak Dialog dengan jQuery

Suatu saat Saya pernah mendapati seorang pendatang yang mengunjungi blog Saya dari kata kunci yang kurang lebihnya seperti ini:

membuat jquery ui dialog di blogspot

Tidak. Jangan pernah melakukan itu. Itu pemborosan! Menerapkan jQuery UI Dialog di dalam blog Saya sebut sebagai pemborosan karena jQuery UI tidak hanya sebatas untuk menciptakan kotak dialog saja. Bagi Saya, jQuery UI cakupannya terlalu besar jika hanya diterapkan untuk sebuah blog. Apalagi jika itu difungsikan untuk menciptakan kotak dialog saja. Alternatifnya adalah, cukup dengan membuat sebuah kerangka kotak dialog dengan kode HTML dan CSS, kemudian atur kemunculannya dengan jQuery yang umum dipakai seperti .show(), .slideDown() dan .fadeIn():

Lihat Demo Unduh Berkas

Kerangka dan Konten

Pada contoh di atas Saya menerapkan kotak dialog sebagai formulir login, tapi itu tidak mutlak. Anda bisa menggunakan kotak dialog ini untuk apa saja, selama Anda tahu bagaimana cara menerapkan elemen pemicu pada tempat yang tepat untuk membuka kotak dialog. Elemen pemicu Saya buat berupa class="open-dialog". Kelas ini bisa diterapkan pada tombol atau link untuk memicu kemunculan kotak dialog:

<button class='open-dialog'>Buka Dialog</button>

<a class='open-dialog' href='#'>Buka Dialog</a>

Kerangka dialog terdiri dari sebuah elemen induk #kotak-dialog, elemen <h3> sebagai judul, overlay sebagai tabir hitam dan beberapa tombol sebagai pemicu aksi lain:

HTML

<!-- START DIALOG BOX -->
<div id='kotak-dialog'>
    <h3 class='title'>Kotak Dialog<a href='#' class='close'>&#215;</a></h3>
    <div class='isi-dialog'>

        Apakah Anda yakin dan tetap ingin melakukan ini?

        <div class='button-wrapper'>
            <button class='okeh'>OK</button> 
            <button class='close'>Cancel</button>
        </div>

    </div>
</div> <!-- end kotak-dialog -->
<div id='dialog-overlay'></div>
<!-- END DIALOG BOX -->

CSS

#kotak-dialog {
  position:absolute;
  top:20%;
  left:50%;
  margin:0px 0px 0px -200px;
  width:400px;
  height:auto;
  background-color:#fff;
  -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  box-shadow:0px 1px 2px rgba(0,0,0,0.4);
  z-index:1000;
  display:none;
}

#kotak-dialog *:focus {
  outline:none;
}

#kotak-dialog h3.title {
  background-color:#3B5998;
  padding:10px 15px;
  color:#fff;
  font:normal 16px Arial,Sans-Serif;
  margin:0px 0px 0px 0px;
  position:relative;
}

#kotak-dialog h3.title a {
  position:absolute;
  top:10px;
  right:15px;
  color:#fff;
  text-decoration:none;
  cursor:pointer;
}

#kotak-dialog .isi-dialog {
  margin:15px;
  font:normal 12px Arial,Sans-Serif;
}

#kotak-dialog .button-wrapper {
  padding:10px 15px 0px;
  border-top:1px solid #ddd;
  margin-top:15px;
}

#kotak-dialog .button-wrapper button {
  background-color:#FF0C39;
  border:none;
  font:bold 12px Arial,Sans-Serif;
  color:#fff;
  padding:5px 10px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  cursor:pointer;
}

#kotak-dialog .button-wrapper button:hover {
  background-color:#aaa;
}

#dialog-overlay {
  position:fixed !important;
  position:absolute;
  z-index:999;
  top:0px;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:#000;
  display:none;
}

jQuery

$(function() {
     //Tampilkan kotak dialog saat .open-dialog diklik
     $('.open-dialog').click(function() {
          $('#kotak-dialog').show();
          $('#dialog-overlay').fadeTo("normal", 0.4);
          return false;
     });

     //Tutup kotak dialog saat .close diklik
     $('#kotak-dialog .close').click(function() {
          $('#kotak-dialog').fadeOut();
          $('#dialog-overlay').hide();
          return false;
     });

     //Aksi utama dituliskan di sini, saat tombol OK diklik
     $('#kotak-dialog .okeh').click(function() {
          alert("Hapus alert box ini kemudian ganti dengan fungsi tertentu.");
     });
});

Jangan lupa juga untuk memuat library jQuery sebelum menerapkan kode di atas, jika tidak, kode di atas tidak akan pernah bekerja (pelajari tentang jQuery di sini).

Semoga cara singkat ini bisa lebih menghemat baris kode sehingga tidak akan memperberat proses pemuatan halaman blog Anda.