Plugin JavaScript Kotak Dialog

Tabel Konten
  1. Memasang Plugin 
  2. Aktivasi 
    1. Daftar Konfigurasi Lengkap 
    2. Contoh-Contoh Dasar 
    3. Rekayasa Tombol 
  3. Kode Sumber 
Screenshoot of JavaScript dialog box plugin.

Plugin kotak dialog ini pada dasarnya hanyalah pengembangan sederhana dari konsep draggable element yang pernah Saya tuliskan sebelumnya. Kotak dialog ini hanya menggunakan JavaScript mentah, jadi tentu saja akan memiliki beberapa keterbatasan, diantaranya adalah:

  1. Tidak ada fitur resizable.
  2. Tidak ada efek animasi.
  3. Tidak bisa membuka beberapa kotak dialog sekaligus, hanya satu kotak dialog dengan isi dan ukuran yang berubah-ubah.

Untuk lebih jelasnya bisa dilihat di halaman demo:

Lihat Demo

Memasang Plugin 

Untuk memasang plugin kotak dialog, Anda perlu menambahkan file CSS ini di atas kode </head>:

<link rel="stylesheet" href="../dialog-box.min.css"/>

Kemudian tambahkan juga file JavaScript ini di atas </body>:

<script src="../dialog-box.min.js"></script>

Aktivasi 

Konsep dasar aktivasi ada dua, yaitu membuka kotak dialog dan menutup kotak dialog. Untuk membuka kotak dialog berdasarkan aksi klik pada tombol, jalankan fungsi setDialog dengan parameter open. Sedangkan untuk menutup kotak dialog, gunakan parameter close:

<a href='javascript:setDialog("open");'>Buka kotak dialog</a>
<a href='javascript:setDialog("close");'>Tutup kotak dialog</a>

Lihat Demo

Daftar Konfigurasi Lengkap 

Setelah Anda mengerti mengenai bagaimana caranya menampilkan dan menyembunyikan kotak dialog, selanjutnya Anda perlu mengetahui cara menyisipkan konten dan juga merekayasa tombol-tombol kotak dialog. Yang mana semua pengaturan itu akan dilakukan pada parameter ke dua, berupa objek seperti ini:

<a href='javascript:setDialog("open", { ... });'>Buka kotak dialog</a>
OpsiKeterangan
titleDigunakan untuk menentukan judul kotak dialog.
contentDigunakan untuk menentukan konten kotak dialog.
widthDigunakan untuk menentukan lebar kotak dialog dalam piksel.
heightDigunakan untuk menentukan tinggi kotak dialog dalam piksel.
topDigunakan untuk menentukan jarak atas kotak dialog terhadap layar.
leftDigunakan untuk menentukan jarak kiri kotak dialog terhadap layar.
specialClassDigunakan untuk menambahkan kelas CSS khusus pada kotak dialog (untuk keperluan modifikasi penampilan).
fixedJika bernilai true, posisi kotak dialog akan melayang dan tidak akan terbawa gulungan layar. Jika bernilai false, posisi kotak dialog bisa terbawa gulungan layar.
overlayPilihan untuk menampilkan atau menyembunyikan tabir kotak dialog.
buttonsAdalah deret objek yang nantinya akan berubah menjadi daftar tombol baru (akan Saya jelaskan nanti).

Konfigurasi secara keseluruhan:

setDialog("open", {
    title: 'Judul kotak dialog',
    content: 'Isi kotak dialog',
    width: 300,
    height: 150,
    top: false,
    left: false,
    specialClass: "",
    fixed: true,
    overlay: false,
    buttons: {}
});

Contoh-Contoh Dasar 

Kotak dialog dengan judul dan konten berupa kode HTML:

<a href='javascript:setDialog("open", {title: "Judul Dialog", content: "Konten dialog dan &lt;strong&gt;sedikit kode HTML&lt;/strong&gt;"});'>Buka</a>

Lihat Demo

Menyisipkan elemen <iframe>:

<a href='javascript:setDialog("open", {title: "Judul Dialog", content: "&lt;iframe src=&quot;URL-IFRAME.html&quot;&gt;&lt;/iframe&gt;"});'>Buka</a>

Lihat Demo

Catatan Penting: Mohon perhatikan mengenai penulisan tanda petik pada pengeksekusian fungsi secara langsung. Jika tanda petik yang digunakan pada atribut HTML adalah petik ganda, gunakan petik tunggal pada pengaturan fungsi setDialog, sebaliknya, jika tanda petik yang digunakan pada atribut HTML adalah petik tunggal, gunakan petik ganda pada pengaturan fungsi setDialog:

<a href="javascript:setDialog('open');">
        ^                     ^    ^  ^
        A                     B    B  A

<a href='javascript:setDialog("open");'>
        ^                     ^    ^  ^
        B                     A    A  B

Mengingat konten kotak dialog bisa berukuran sangat panjang, dan juga untuk mengatasi masalah penulisan tanda petik yang sangat rawan kesalahan seperti yang Saya jelaskan di atas, sebenarnya akan lebih baik jika eksekusi fungsi setDialog() dilakukan di luar elemen tersebut dengan cara menghubungkannya melalui ID atau kelas elemen HTML seperti ini:

<a id="dialog-link-1" href="#">Buka</a>
<script>
document.getElementById('dialog-link-1').onclick = function() {
    setDialog("open", {
        title: 'Judul Dialog',
        content: 'Konten dialog super panjaaaaaaaaaaaaaaaannnnggggggg...!!!',
        width: 600,
        height: 300
    });
    return false;
};
</script>

Pertama-tama nyatakan kode HTML untuk tombol pemicu kotak dialog dengan ID yang spesifik, setelah itu eksekusi fungsi setDialog dengan cara mengakses elemen melalui document.getElementById()

Lihat Demo

Anda juga bisa menyisipkan konten dari elemen lain:

<div id="foo" style="display:none;">
    <h2>Lorem Ipsum Text</h2>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit,
    sed diam <strong>nonummy</strong> nibh euismod
    magna aliquam erat volutpat. Ut wisi enim ad minim veniam,
    quis nostrud exerci tation ullamcorper suscipit lobortis
    nisl ut aliquip ex ea commodo consequat.
    Duis autem vel eum iriure dolor in hendrerit in vulputate
    velit esse molestie consequat, vel illum dolore eu feugiat
    nulla facilisis at vero eros et accumsan et iusto odio
    dignissim qui blandit praesent luptatum zzril delenit
    augue duis dolore te feugait nulla facilisi.</p>
</div>
<a id="dialog-link-2" href="#">Buka</a>
<script>
document.getElementById('dialog-link-2').onclick = function() {
    setDialog("open", {
        title: 'Judul Dialog',
        content: document.getElementById('foo').innerHTML,
        width: 600,
        height: 300
    });
    return false;
};
</script>

Lihat Demo

Rekayasa Tombol 

Masing-masing tombol dapat dibuat melalui konfigurasi buttons dengan nilai berupa objek:

setDialog("open", {
    title: 'Judul Kotak Dialog',
    content: 'Konten kotak dialog.',
    buttons: {
        "Yes": function() {
            alert("Tombol YES ditekan!");
        },
        "No": function() {
            alert("Tombol NO ditekan!");
        }
    }
});

Setiap key dari buttons akan mewakili nama/label tombol, dan fungsi yang mengikutinya akan tereksekusi ketika tombol tersebut ditekan:

Lihat Demo


Kode Sumber 

  1. dialog-box.css
  2. dialog-box.js
  3. dialog-box.min.css
  4. dialog-box.min.js

25 Komentar

  • Fajrin

    boleh juga nih.. keren abis pokoknya :-bd

  • Beben Koben

    yg gini kok simple :-a !!!

    • Anonim

      mungkin maksud dari "simple" itu adalah karena menggunakan java script ga pakek jquery. wkwkwkwkwkw

  • Randy

    gila keren abis dahh,. dipikir2 dulu ah bikin apaan ya dengan ini? hehe

  • Unknown

    Manfaat banget gan,
    thanks :-bd

  • Kang Ismet

    Untuk menempatkan kotak dialog pada tag pre gimana mas? seperti pada postingan ini:
    http://www.dte.web.id/2012/11/javascript-popup-copy-code.html
    intynya COPY diganti menjadi dialog box...

    • Taufik Nurrohman

      Tujuan kita membuat salinan kode ke jendela munculan itu karena untuk mengatasi masalah misalnya, kode tidak bisa disalin karena baris-baris angka ikut tersalin, atau indentasinya rusak saat menyalin kode melalui tag <pre>.

      Mengubah jendela munculan menjadi kotak dialog kustom memang bisa, cuma pertanyaannya adalah untuk apa? Bukankah menyalin kode melalui tag <pre> tidak ada masalah? Apakah karena menyalin kode di dalam kotak dialog kustom rasanya lebih enak dibandingkan dengan menyalin kode melalui tag <pre>?

      // Fungsi penyalin kode Mindo Gaweni
      function copy_code(id) {
      var ref = document.getElementById(id),
      code = ref.getElementsByTagName('code')[0].innerHTML;
      setDialog("open", {
      title: 'Kode Sumber',
      content: '<pre>' + code + '</pre>',
      width: 600,
      height: 300
      });
      }
      • Kang Ismet

        masalahnya bukan itu mas.. saya hanya ingin belajar, setelah coba2 gagal terus.. hanya terinspirasi Alex Gorbatchef, ada tombol help....
        Ilustrasinya seperti gambar mas, ketika klik tombol help/info muncul kotak dialog informasi yang stylish, bukan salinan kode....

        • Taufik Nurrohman

          $('<a href="#" class="help-text">?</a>').on("click", function() {
          setDialog("open", {
          title: "Tentang",
          content: "Untuk menyalin kode, klik ganda pada area kode",
          buttons: {
          "Sip masbro!": function() {
          setDialog("close");
          }
          }
          });
          return false;
          }).appendTo($('pre'));

          Demo: http://jsfiddle.net/tovic/5mwP7/6/

          • Kang Ismet

            emang jagonya masbrow... tengkyu.. tapi sayang blum bisa liat demo, otomatis CSSnya juga belom dapet.. tumben jsfiddle lola

            • Kang Ismet

              laporan mas... script sudah bisa diterapkan, tapi masih ada sedikit masalah, tombol ikut kena seleksi

              http://1.bp.blogspot.com/-8WU6bU-fV98/UaDdBsZ6R-I/AAAAAAAAESc/ohDOGTWAwHc/s1600/kena-seleksi.png

              saya menggunakan script ini untuk seleksi, bisa dibuat pengecualian untuk class help-text?

              <script type='text/javascript'>
              var pres = document.getElementsByTagName(&quot;pre&quot;);
              for (var i = 0; i &lt; pres.length; i++) {
              pres[i].addEventListener(&quot;dblclick&quot;, function () {
              var selection = getSelection();
              var range = document.createRange();
              range.selectNodeContents(this);
              selection.removeAllRanges();
              selection.addRange(range);
              }, false);
              }
              </script>
  • Anonim

    Lengkap sudah, plus sudah langsung bisa leluasa mengatur tampilan kotak dialog nya! :-bd

  • Ivan Mantovani S

    saya mau tanya, untuk efek animasi apakah pengaturannya tetap pada javascript ?

  • Akhmad Riduan

    Mas kenapa klau aku opload ke google code .js dan .css nyx gak bisa berkerjapadahal udah dalam SVN/Trunk :'(
    aku mau upload ulng karena wrnya gax sesuai dengan tmplte sya
    http://animovsubs.blogspot.com/

  • Alwan

    Kalo Kotak Dialognya Sudah Dalam Keadaan Minimize Gimana Mas?

    • Taufik Nurrohman

      div.className = 'dialog-box minimize';
      • Alwan

        Maaf Mas, Bisa Dijelaskan Lagi Tempat Peletakannya

  • Unknown

    kang Taufik , mau tanya, :D
    kalo mau nambahain code z-index:99999999 di mana ya??
    apakah di dalam specialClass: "", ??
    mohon di bantu ya :D

    • Taufik Nurrohman

      ⇒ http://dte-project.googlecode.com/svn/trunk/dialog-box/dialog-box.css

      • Unknown

        waduh jadi saya harus ngehosting ulang ya mas?? hee :D

  • viandwi

    mas , kalau kode yang untuk URL cara memunculkannya mengisinya gimana :
    <a href='javascript:setDialog("open", {title: "Judul Dialog", content: "Konten dialog dan &lt;strong&gt;sedikit kode HTML&lt;/strong&gt;"});'>Buka</a>

  • BKE

    Mas, untuk menampilkan kotak dialog dengan onclik gimana y :(

Komentar telah ditutup.