JQuery Modal with Flexible Content/Diynamic Content

by Taufik Nurrohman

HTML

<button class="open-dialog" data-dialog-title="Penghapusan Konten" data-dialog-content="Anda yakin?">Hapus</button>
<a class="open-dialog" href="#" data-dialog-title="Membuat Item Baru" data-dialog-content="Isikan nama Anda: &lt;input type=&#39;text&#39; size=&#39;30&#39;&gt;&lt;br&gt;&lt;input type=&#39;checkbox&#39; id=&#39;check-1&#39;&gt;&lt;label for=&#39;check-1&#39;&gt;&lt;small&gt;Saya menerima persyaratan dan layanan&lt;/small&gt;&lt;/label&gt;">Buat Item Baru</a>


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

        <p class='dialog-text'></p>

        <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:0 0 0 -200px;
  width:400px;
  height:auto;
  background-color:#fff;
  -webkit-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow:0 1px 2px rgba(0,0,0,0.4);
  box-shadow:0 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:0 0 0 0;
  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 0;
  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:0;
  right:0;
  bottom:0;
  left:0;
  background-color:#000;
  display:none;
}

JavaScript

$(function() {
     //Tampilkan kotak dialog saat .open-dialog diklik
     $('.open-dialog').click(function() {
          $('#kotak-dialog').show()
          // Menyisipkan konten dari atribut `data-dialog-content`
          .find('.dialog-text').html($(this).data('dialog-content'));
         // Menyisipkan judul dialog dari atribut `data-dialog-title`
          $('#kotak-dialog').find('.title').html($(this).data('dialog-title'));
          $('#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.");
     });
});