Secara standar, PHPMaker 2022 menggunakan class modal-xl untuk menampilkan jendela Modal Dialog lewat bantuan CSS Framework Bootstrap 5. Class ini akan membuat lebar jendela Modal Dialog relatif besar. Nyaris mendekati sisi kiri dan kanan dari layar komputer. Apalagi jika ditampilkan pada laptop atau komputer yang ukuran layarnya relati kecil.
Jika Anda menggunakan Masino Extensions untuk PHPMaker 2022, maka class standar di atas tadi berubah menjadi modal-lg, atau satu tingkat di bawah ukuran class modal-xl. Hal ini sengaja saya lakukan, karena pada umumnya kita tidak membutuhkan lebar Modal Dialog yang terlalu besar.
Namun ada kalanya kita membutuhkan jendela Modal Dialog yang besar untuk satu atau beberapa table tertentu. Apalagi jika kita menggunakan fitur Custom Templates di PHPMaker 2022 yang dapat mengubah layout form Add dan/atau Edit menjadi 2 kolom. Untuk kondisi ini, maka sangat disarankan menggunakan class modal-xl daripada menggunakan class modal-lg.
Pertanyaan selanjutnya, bagaimana cara kita untuk mengubah atau menyesuaikan class Modal Dialog tadi tanpa harus mengubah kode pada file template maupun kode pada file yang sudah dihasilkan oleh PHPMaker 2022? Pertanyaan yang cerdas dan bagus sekali!
Jawabannya sangatlah mudah. Kita cukup menambahkan 3 baris kode jQuery berikut ke bagian Startup Script milik halaman yang terkait.
Katakanlah kita ingin mengubah lebar jendela Modal Dialog dari modal-lg menjadi modal-xl pada form/halaman Add, maka masukkan kode jQuery berikut ke lokasi Client Scripts -> Table-Specific -> Add Page -> Startup Script:
$('#ew-modal-dialog').on('shown.bs.modal', function (event) {
$(this).find('.modal-dialog.modal-lg').removeClass('modal-lg').addClass('modal-xl');
});
Ya, hanya dengan 3 baris kode itu saja, kita sudah dapat mengubah lebar jendela Modal Dialog, dari yang sebelumnya menggunakan class modal-lg menjadi class modal-xl.
Sebaliknya, jika ingin mengubah dari modal-xl ke modal-lg, maka gunakan kode berikut:
$('#ew-modal-dialog').on('shown.bs.modal', function (event) {
$(this).find('.modal-dialog.modal-xl').removeClass('modal-xl').addClass('modal-lg');
});
Ingat! Jangan sampai terbalik ya! Sesuaikan dengan kebutuhan!
Jika halaman Add, Edit, dan/atau View kita tampilkan dari link menu atau tombol yang terdapat di halaman List, maka pastikan kode di atas tadi juga Anda tambahkan ke lokasi berikut: Client Scripts -> Table-Specific -> List Page -> Startup Script.
Betapa mudah dan cepatnya, bukan? Kita sebagai Web Developer tidak perlu menulis kode hanya untuk membuat Modal Dialog tertentu dengan lebar atau class tertentu.
Cukup dengan menambahkan sedikit kode itu saja, dan selebihnya sudah ditangani oleh PHPMaker 2022.
Tinggalkan Balasan