Menyediakan informasi seputar perkembangan mesin Blogger dan internet secara umum.

Membuat Kotak Dialog dengan jQuery

jQuery Dialog Box

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.

  

Berlangganan

Berlangganan: Dapatkan berbagai materi dan informasi seputar dunia pemrograman yang tidak akan pernah bisa kalian dapatkan di buku dan di bangku kuliah.

 33 Komentar

Memuat…

Tautan (link) hidup dalam komentar akan terhapus secara otomatis.
Untuk menyisipkan tautan dengan aman, gunakan kode [url=http://example.com]Teks Tautan[/url]
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA</i>
Untuk menyisipkan gambar, gunakan kode [img]URL GAMBAR[/img]
Untuk menyisipkan judul, gunakan tag <b rel="h4">JUDUL ANDA DI SINI…</b>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA DI SINI…</strong>
Untuk menciptakan efek huruf miring gunakan tag <em>TEKS ANDA DI SINI…</em>

Khusus untuk membalas komentar disarankan menggunakan tombol balas di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur. Karena mungkin, apa yang Anda tanyakan/katakan saat ini akan sangat bermanfaat bagi pembaca lain.

:) :( ^_^ :D ;) :bd :'( :\ ;p B) :Q :Ozzz 7:( \o/ **p :* 0:) :a 7:O *fuck* x& x@ ~x( *yaya* =p*

Nama Saya Taufik Nurrohman. Sebenarnya Saya tidak bisa disebut sebagai seorang yang profesional dalam bidang ini, karena Saya tidak menguasai bidang ini melalui pendidikan formal. Saya hanyalah seorang antusias. Dibandingkan sebagai seorang desainer atau pengembang, Saya lebih suka jika disebut sebagai seorang hobiis saja yang tertarik dengan dunia web.

Daftar Tautan

Saya tidak bisa hidup tanpa JavaScript! Aktifkan JavaScript?
Ke atas!