Tutorial : Menampilkan Dialog Box Menggunakan JqueryUI

Ketika form dari halaman dari sebuah web nampak terlihat kurang menarik di karenakan terlalu banyak form inputan yang tampil, dan kita agak sedikit terganggu dengan tampilan form yang terlalu banyak, dari permasalahan tersebut web developer biasanya menggunakan dialog box untuk menyederhanakan tampilan form pada web, sehingga tidak mengurangi fungsionalitas dari web itu sendiri.

Pada kesempatan kali ini saya akan mencoba membagikan tips / tutorial untuk menampilkan Dialog Box menggunakan JqueryUI, Berikut ini adalah langkah-langkahnya :

1. Siapkan script untuk html seperti script berikut :
           <button id="create-daily">Create Daily</button>
           <div id="dialog-form" title="Input Daily Activity">
                Isikan script sesuai dengan kebutuhan anda
          </div>
2. Pastikan anda telah memiliki framework jquery dan jquerui dan telah ditanamkan pada script web yang akan di custom, seperti potongan script di bawah ini.
           <script src="../../JavaScript/jquery-ui.js"></script>
   <script src="../../JavaScript/app.js" ></script>
       
3. Coba copy'kan code javascript berikut,

         <script>

$( function() {

dialogs = $( "#dialog-form" ).dialog({

autoOpen: false,

show: {

effect: "blind",

duration: 1000

},

hide: {

effect: "explode",

duration: 1000

}

});

$( "#create-daily" ).on( "click", function() {

dialogs.dialog( "open" );

});

} );

</script>


Setelah itu coba lihat hasilnya,

Sekian tutorial dari saya semoga bermanfaat