Tombol back tutup modal bootstrap tanpa kembali ke halaman sebelumnya

Bismillaahirrohmaanirrohiim…

Jika kita membuat aplikasi web base menggunakan bootstrap, saat user membuka modal, kadangkala mereka lupa kalo tombol back akan kembali ke halaman sebelumnya, padahal inginnya hanya menutup modal saja.

Nah kode untuk menangani aksi back user jika modal terbuka adalah sebagai berikut:

// Simpan modal yang sedang terbuka
        let modalOpened = false;
        let activeModalId = null;

        // Saat modal ditampilkan
        $(document).on('shown.bs.modal', '.modal', function () {
            modalOpened = true;
            activeModalId = $(this).attr('id');

            // Tambahkan entri palsu ke history
            history.pushState({ modalOpen: true }, '');
        });
        // Saat modal ditutup
        $(document).on('hidden.bs.modal', '.modal', function () {
            modalOpened = false;
            activeModalId = null;
        });

        // Deteksi tombol back
        window.addEventListener('popstate', function (event) {
            if (modalOpened && activeModalId) {
            // Tutup modal yang sedang terbuka
            $('#' + activeModalId).modal('hide');

            // Tambahkan ulang state agar tidak keluar halaman
            history.pushState({ modalOpen: true }, '');
            }
        });

fungsi ini cukup ditaruh difooter, otomatis setiap ada modal terbuka disemua halaman, jika tombol back ditekan akan menutup modal tersebut tanpa kembali ke halaman sebelumnya.

Syaratnya:

• Bootstrap 5.3
• Jquery
• modal harus punya ID

Demikian semoga bermanfaat.