Membuat Modal Obrolan Box Dengan Custombox.Js

Membuat Modal Dialog Box Dengan Custombox.js - Custombox.js yaitu sebuah plugin yang dapat kita gunakan untuk menciptakan modal window obrolan box. Secara default, plugin ini mempunyai 20 imbas transisi namun dapat kita kembangkan lagi pada beberapa imbas transisi dengan menawarkan posisi.

Dengan begitu kita dapat menciptakan aneka macam obrolan box di blog untuk aneka macam keperluan. Misalnya untuk obrolan box warta pengunjung, untuk menampilkan widget, dan lain-lain. Dengan menawarkan imbas transisi yang berbeda pada setiap obrolan box yang ditampikan, maka ini akan menawarkan warna berbeda pada blog kita.

Cara penerapannya pun cukup mudah, kita hanya perlu menghosting js dan css dan menawarkan sedikit sentuhan jquery untuk memberi perintah dan sedikit custom css untuk obrolan box. Begitu pun dengan warna overlay-nya, kita dapat menawarkan warna overlay yang berbeda pada setiap obrolan box. Secara default, overlay akan berwarna hitam transparant.

Untuk demo aneka macam imbas transisi modal obrolan 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 isyarat </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 isyarat </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 yaitu isyarat HTML untuk menciptakan obrolan 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 menciptakan lebih dari satu obrolan box, maka id="modal-1" silahkan sesuaikan dengan banyaknya obrolan box yang dibuat. Misalnya id="modal-2" untuk obrolan box yang kedua dan seterusnya, begitu pun untuk button.

Namun untuk <div class="md-overlay"></div> cukup hanya menciptakan satu saja.

Dan di bawah ini yaitu CSS untuk kustomisasi obrolan 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 isyarat jquery di bawah ini di atas isyarat </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 isyarat HTML di atas.

target silahkan sesuaikan #modal-1 dengan id obrolan box pada isyarat HTML di atas.

effect silahkan sesuaikan dengan imbas 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 menawarkan warna pada overlay, silahkan sesuaikan pada isyarat overlayColor dengan mengganti isyarat #ddd. Secara default overlay akan berwarna hitam transparant. Hapus isyarat overlayColor: '#ddd', jikalau Anda ingin overlay berwarna hitam.

width untuk memberi lebar obrolan box. 600 di atas berarti obrolan box mempunyai lebar 600px. Secara default obrolan box mempunyai lebar 80% lebar layar.

Jika obrolan boxnya ada 2 buah maka jquery-nya ibarat 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 obrolan box ketiga dan seterusnya silahkan perhatikan penempatan kodenya pada isyarat jquery di atas. Sedangkan jquery untuk tombol close (.md-close) cukup satu saja ibarat di atas. Dan pastikan Anda sudah menyimpan jquery library pada template blog Anda berapa pun versinya.

Source: http://dixso.github.io/custombox/

Sumber https://www.kompiajaib.com/

Share this post