Bagaimana untuk mengalih keluar Butang Tutup daripada Dialog UI jQuery?

Menyesuaikan Dialog UI jQuery: Mengalih keluar Butang Tutup

Dalam jQuery UI, widget dialog menyediakan antara muka pengguna yang boleh disesuaikan untuk memaparkan kotak dialog modal . Secara lalai, kotak dialog ini termasuk butang "Tutup" di penjuru kanan sebelah atas, dilambangkan dengan simbol "X". Walau bagaimanapun, terdapat senario apabila mengalih keluar butang ini mungkin diingini.

Pernyataan Masalah:

Bagaimanakah seseorang boleh mengalih keluar butang tutup daripada kotak dialog UI jQuery?

Penyelesaian:

Ada dua pendekatan utama untuk mencapai penyesuaian ini:

Kaedah 1: Mengatasi Kaedah Terbuka

Kaedah ini melibatkan mengatasi fungsi "terbuka" yang dikaitkan dengan kotak dialog. Untuk menyembunyikan butang tutup apabila dialog tertentu dimulakan, gunakan coretan kod berikut:

$("#div2").dialog({
    closeOnEscape: false,
    open: function(event, ui) {
        $(".ui-dialog-titlebar-close", ui.dialog || ui).hide();
    }
});

Kod ini menyasarkan butang tutup ("$(".ui-dialog-titlebar-close")") dalam DOM dialog dan menyembunyikannya ("hide()").

Kaedah 2: CSS Penyesuaian

Sebagai alternatif, anda boleh menggunakan CSS untuk menyembunyikan butang tutup secara seragam pada semua kotak dialog dengan menambah peraturan gaya berikut:

.ui-dialog-titlebar-close {
    visibility: hidden;
}

Dengan menetapkan sifat "keterlihatan" kepada "tersembunyi," anda dengan berkesan mengalih keluar butang tutup daripada paparan pada semua kotak dialog UI jQuery.

Dengan melaksanakan salah satu daripada ini penyelesaian, anda boleh menyesuaikan widget dialog UI jQuery untuk memenuhi keperluan khusus anda dengan mengalih keluar butang tutup, meningkatkan interaksi pengguna dan memperkemas antara muka keseluruhan.

Atas ialah kandungan terperinci Bagaimana untuk mengalih keluar Butang Tutup daripada Dialog UI jQuery?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!