Cara Menggunakan Modal Dialog Dengan jQuery UI

Selamat Datang di tips dan trik Source Code Aplikasi, Halo teman – teman apakabar seluruh. Berjumpa kembali dengan saya di atikel hari ini, di latihan kemarin kita telah belajar beberapa guna dari jQuery. Dan kali ini kita akan belajar mengenai Cara Menggunakan Modal Dialog Dengan jQuery UI, dimana di pada jQuery UI telah di sediakan beberapa diantaranya ialah jQueryUI CSS, jQueryUI Komponen Layout dan jQueryUI Plugins. Dengan kita memanggil fungsinya karenanya dengan otomatis tampilan akan tampil dengan sendirinya, ini sama dengan kita belajar bootstrap hanya tinggal memanggil class atau id nya saja. Di latihan kali ini kita akan praktekkan dengan studi case sederhana, baru nanti teman – teman dapat kembangkan lagi bagi hasil yang maksimal.

Bagus, saatnya kita implementasikan Cara Menggunakan Modal Dialog Dengan jQuery UI teman – teman siapkan text editornya. Pertama-tama – tama yang mesti kita lakukan ialah load terlebih dahulu library jQuery UI nya kalian dapat copy di bawah ini atau dapat kunjungi seketika laman resminya di www.jQuery.com

http://code.jquery.com/ui/1.10.4/themes/ui-lightness/jquery-ui.css

bagi link jQuery UI css

http://code.jquery.com/jquery-1.10.2.js
http://code.jquery.com/ui/1.10.4/jquery-ui.js

Dan yang ini bagi link jQuery dan jQuery UI nya, bagi menggunakan teman – teman lumayan letakkan di pada tag head

Lalu teman – teman ketikkan script seperti gambar di bawah ini

Dan save dengan nama index.html, baru berikutnya kita berikan script jQuery UI nya bagi menampilkan modal kotak dialog

<script>
 $(function() {
    $(#dialog).dialog({
     autoOpen: false, 
    });
    $(#buka).click(function(){
     $(#dialog) .dialog(open);
    });
 });
 </script>

Bila telah save dan jalankan di browsernya, karenanya hasilnya seperti gambar di bawah ini

Klik button, karenanya kotak dialog akan tampil

Bila ingin mengcostum kita tinggal inspect element di browser, caranya klik kanan di mouse dan pilih inspect faktor

Bila berhasil karenanya script nya berada diantara borwser dan kita tinggal arahkan

Klik pic atau yang saya beri kotak merah di gambar di atas ini, kemudian klik di judul dialog yang mempunyai background orange, karenanya akan muncul script

Kemudian kita copy dan letakkan di text editornya, lalu saya berikan background berwarna merah

Bila telah save dan refresh di browsernya, bila belum berhasil beckground berwarna merah kita kita custum lagi di title dialog

Kita tambahkan di css nya dengan beckground transparent

Karenanya hasilnya backgorunt head title dialog berwarna merah

Bagaimana, lumayan gampang bukan..?? Bagus, mungkin demikianlah di artikel kali ini mengenai Cara Menggunakan Modal Dialog Dengan jQuery UI kita berjumpa kembali di artikel yang akan datang. Semoga bermanfaat dan semakin tahu bagaimana cara modifikasi bagi jQuery UI nya khususnya kalian yang baru belajar jQuery UI. Terimakasih dan Hingga Jumpa.

Sumber https://kursuswebsite.org