Dalam pengembangan antarmuka pengguna, seringkali kita perlu menampilkan informasi penting atau meminta input dari pengguna tanpa mengarahkan mereka ke halaman baru. Modal dialog adalah solusi sempurna untuk kebutuhan ini. Widget Modal Dialog JQuery UI memungkinkan Anda untuk membuat jendela pop-up interaktif yang akan mengunci interaksi dengan sisa halaman sampai dialog tersebut ditutup. Ini sangat berguna untuk menampilkan pesan konfirmasi, formulir login, atau detail produk.
Langkah 1: Mempersiapkan Struktur HTML
Widget dialog bekerja dengan mengubah elemen HTML yang sudah ada (biasanya <div>) menjadi jendela dialog. Anda cukup menempatkan konten dialog Anda di dalam <div> tersebut.
<!DOCTYPE html>
<html>
<head>
<title>Tutorial JQuery UI #6: Modal Dialog</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js"></script>
<style>
body { font-family: Arial, sans-serif; margin: 20px; }
.demo-container { margin-top: 20px; }
</style>
</head>
<body>
<h1>Demonstrasi Modal Dialog JQuery UI</h1>
<div class="demo-container">
<button id="openDialog">Buka Dialog</button>
</div>
<div id="myDialog" title="Pesan Penting" style="display: none;">
<p>Ini adalah konten dari modal dialog. Halaman utama tidak dapat diinteraksi sampai dialog ini ditutup.</p>
</div>
<script>
$( function() {
// Kode JQuery UI akan ditempatkan di sini
});
</script>
</body>
</html>
Perhatikan bahwa kita menambahkan style="display: none;" pada <div> dialog. Ini untuk memastikan dialog tidak terlihat saat halaman dimuat, karena JQuery UI akan mengurus tampilan dialog saat kita mengaktifkannya.
Langkah 2: Mengaktifkan Dialog dan Mengaturnya sebagai Modal
Untuk mengubah <div> menjadi dialog, panggil metode .dialog() pada elemen tersebut. Untuk membuatnya modal (mengunci interaksi halaman di belakangnya), atur opsi modal menjadi true.
$( function() {
$( "#myDialog" ).dialog({
modal: true,
autoOpen: false // Jangan tampilkan saat halaman dimuat
});
});
Dengan autoOpen: false, dialog tidak akan langsung muncul. Kita akan menampilkannya saat pengguna mengklik tombol.
Langkah 3: Membuka dan Menutup Dialog secara Manual
Sekarang, mari kita kaitkan tombol “Buka Dialog” dengan aksi untuk menampilkan dialog. Gunakan metode open pada widget dialog. Secara default, dialog memiliki tombol tutup di sudutnya, atau Anda bisa menutupnya menggunakan metode close.
$( function() {
// Inisialisasi dialog, atur opsi modal dan autoOpen
var myDialog = $( "#myDialog" ).dialog({
modal: true,
autoOpen: false
});
// Event click untuk membuka dialog
$( "#openDialog" ).on( "click", function() {
myDialog.dialog( "open" );
});
});
Sekarang, saat Anda mengklik tombol, sebuah jendela modal akan muncul di tengah layar Anda, dan latar belakang halaman akan menjadi gelap dan tidak dapat diklik.
Langkah 4: Menambahkan Tombol Aksi
Anda seringkali membutuhkan tombol di dalam dialog untuk interaksi lebih lanjut, seperti “OK” atau “Batal”. Anda dapat menambahkan tombol-tombol ini melalui opsi buttons.
$( function() {
var myDialog = $( "#myDialog" ).dialog({
modal: true,
autoOpen: false,
buttons: {
"Simpan": function() {
// Kode yang dijalankan saat tombol "Simpan" diklik
alert("Data disimpan!");
$( this ).dialog( "close" ); // Tutup dialog
},
"Batal": function() {
// Kode yang dijalankan saat tombol "Batal" diklik
$( this ).dialog( "close" ); // Tutup dialog
}
}
});
$( "#openDialog" ).on( "click", function() {
myDialog.dialog( "open" );
});
});
Setiap tombol didefinisikan sebagai pasangan “nama tombol”: “fungsi yang akan dijalankan”. Dalam fungsi tersebut, $(this) merujuk pada elemen dialog, yang memungkinkan Anda untuk menutupnya menggunakan $( this ).dialog( "close" );.
Langkah 5: Mengontrol Opsi Lainnya
Widget dialog memiliki berbagai opsi lain untuk kustomisasi, di antaranya:
width: Mengatur lebar dialog dalam piksel.height: Mengatur tinggi dialog dalam piksel.resizable: Mengatur apakah dialog dapat diubah ukurannya (trueataufalse).draggable: Mengatur apakah dialog dapat digeser (trueataufalse).
$( function() {
var myDialog = $( "#myDialog" ).dialog({
modal: true,
autoOpen: false,
width: 400, // Lebar 400px
resizable: false, // Tidak bisa diubah ukurannya
buttons: {
// ... tombol yang sama dari langkah sebelumnya
}
});
$( "#openDialog" ).on( "click", function() {
myDialog.dialog( "open" );
});
});
Kesimpulan
Widget Modal Dialog JQuery UI adalah alat yang sangat kuat untuk meningkatkan interaksi pengguna di situs web Anda. Dengan beberapa baris kode, Anda dapat membuat jendela pop-up profesional yang dapat digunakan untuk berbagai tujuan, mulai dari menampilkan pesan hingga mengumpulkan input pengguna, tanpa perlu mengarahkan mereka ke halaman lain. Ini menciptakan pengalaman pengguna yang mulus dan efisien.
Untuk informasi lebih lanjut tentang semua opsi dan event yang tersedia, selalu rujuk pada dokumentasi resmi JQuery UI.
