Ditulis oleh: Ditulis pada: 11/13/2014
Membuat Modal Dialog Box Dengan Custombox.js - Custombox.js adalah sebuah plugin yang bisa kita gunakan untuk membuat modal window dialog box. Secara default, plugin ini memiliki 20 efek transisi namun bisa kita kembangkan lagi pada beberapa efek transisi dengan memberikan posisi.
Dengan begitu kita bisa membuat berbagai dialog box di blog untuk berbagai keperluan. Misalnya untuk dialog box informasi pengunjung, untuk menampilkan widget, dan lain-lain. Dengan memberikan efek transisi yang berbeda pada setiap dialog box yang ditampikan, maka ini akan memberikan warna berbeda pada blog kita.
Cara penerapannya pun cukup mudah, kita hanya perlu menghosting js dan css dan memberikan sedikit sentuhan jquery untuk memberi perintah dan sedikit custom css untuk dialog box. Begitu pun dengan warna overlay-nya, kita bisa memberikan warna overlay yang berbeda pada setiap dialog box. Secara default, overlay akan berwarna hitam transparant.
Untuk demo berbagai efek transisi modal dialog box dengan custombox.js ini sudah saya coba dan buatkan di JSFiddle untuk memastikan bahwa ini bekerja dengan baik. Silahkan coba pada link demo di bawah ini.
Jika Anda tertarik untuk mencobanya, silahkan ikuti langkah-langkahnya di bawah ini.
Silahkan simpan script js di bawah ini di atas kode
</body>
<script src="http://yourjavascript.com/441114301111/custombox-min.js"></script>
Saran saya sebaiknya js di atas dihosting sendiri pada akun hosting Anda, baik di yourjavascript, google drive, google code, atau lainnya.
Kemudian silahkan simpan juga script css di bawah ini di atas kode
</head>
<link href='http://dixso.github.io/custombox/dist/custombox.min.css' rel='stylesheet' type='text/css'>
Sama halnya dengan js di atas, sebaiknya css di atas dihosting sendiri pada akun hosting Anda, baik di yourjavascript, google drive, google code, atau lainnya.
Kemudian di bawah ini adalah kode HTML untuk membuat dialog box-nya.
<div class="md-modal" id="modal-1">
<div class="md-content">
<h3>Title Modal Dialog</h3>
<div>
<p>CONTENT DIALOG BOX IS HERE</p>
<span class="md-close">×</span>
</div>
</div>
</div>
<div class="md-overlay"></div>
<button class="md-trigger1">Modal 1</button>
Jika kita ingin membuat lebih dari satu dialog box, maka
id="modal-1" silahkan sesuaikan dengan banyaknya dialog box yang dibuat. Misalnya id="modal-2" untuk dialog box yang kedua dan seterusnya, begitu pun untuk button.
Namun untuk
<div class="md-overlay"></div> cukup hanya membuat satu saja.
Dan di bawah ini adalah CSS untuk kustomisasi dialog box dan tombolnya. Silahkan sesuaikan dengan selera Anda.
.md-modal{display:none}
.md-content{z-index:10;background:#eee;text-align:left;padding:10px;position:relative;border-radius:5px;border:10px solid #000;}
.md-close{position:absolute;top:0;right:5px;background:none;border:none;font:bold 20px Arial;cursor:pointer;padding:0}
button.{display:block;margin-bottom:5px;cursor:pointer}
Kemudian silahkan simpan kode jquery di bawah ini di atas kode
</body>
<script>
$(function () {
$('.md-trigger1').on('click', function ( e ) {
Custombox.open({
target: '#modal-1',
effect: 'fadein',
overlayColor: '#ddd',
width: 600
});
e.preventDefault();
});
$('.md-close').on('click', function ( e ) {
Custombox.close();
});
});
</script>
.md-trigger1 silahkan sesuaikan dengan class pada button pada kode HTML di atas.target silahkan sesuaikan #modal-1 dengan id dialog box pada kode HTML di atas.effect silahkan sesuaikan dengan efek transisi yang ingin Anda gunakan, ada 20 efek, diantaranya: fadein, slide, newspaper, fall, sidefall, blur, flip, sign, superscaled, slit, rotate, letmein, makeway, slip, corner, slidetogether, scale, door, push, dan contentscale.
Jika Anda ingin memberikan warna pada overlay, silahkan sesuaikan pada kode
overlayColor dengan mengganti kode #ddd. Secara default overlay akan berwarna hitam transparant. Hapus kode overlayColor: '#ddd', jika Anda ingin overlay berwarna hitam.width untuk memberi lebar dialog box. 600 di atas berarti dialog box memiliki lebar 600px. Secara default dialog box memiliki lebar 80% lebar layar.
Jika dialog boxnya ada 2 buah maka jquery-nya seperti berikut:
<script>
$(function () {
$('.md-trigger1').on('click', function ( e ) {
Custombox.open({
target: '#modal-1',
effect: 'fadein',
overlayColor: '#ddd',
width: 600
});
e.preventDefault();
});
$('.md-trigger2').on('click', function ( e ) {
Custombox.open({
target: '#modal-2',
effect: 'slide',
width: 400
});
e.preventDefault();
});
$('.md-close').on('click', function ( e ) {
Custombox.close();
});
});
</script>
Untuk dialog box ketiga dan seterusnya silahkan perhatikan penempatan kodenya pada kode jquery di atas. Sedangkan jquery untuk tombol close (
.md-close) cukup satu saja seperti di atas. Dan pastikan Anda sudah menyimpan jquery library pada template blog Anda berapa pun versinya.
Source: http://dixso.github.io/custombox/