Tetapkan tetingkap pop timbul untuk dipusatkan dalam jquery

Dengan pembangunan berterusan dan mempopularkan teknologi Internet, pembangunan laman web memberi lebih banyak perhatian kepada pengalaman pengguna. Antaranya, tetingkap pop timbul, sebagai alat gesaan pengguna biasa, digunakan lebih dan lebih kerap dalam pembangunan laman web. Walau bagaimanapun, dalam pembangunan sebenar, cara untuk memusatkan tetingkap pop timbul juga merupakan isu penting yang perlu dipertimbangkan oleh pembangun kami. Artikel ini akan menggunakan jquery untuk melaksanakan kaedah pemusatan tetingkap timbul supaya pembangun boleh menggunakannya secara fleksibel dalam kerja sebenar.

Dalam jquery, terdapat banyak cara untuk memusatkan tetingkap timbul. Dua kaedah yang biasa digunakan diperkenalkan di bawah.

Kaedah 1: kaedah css

Menggunakan kaedah css jquery boleh menetapkan gaya elemen dengan mudah. Dengan menetapkan atribut kedudukan elemen kepada mutlak, dan kemudian menetapkan kedudukan elemen melalui atribut atas dan kiri, anda boleh mencapai kesan pemusatan. Kodnya adalah seperti berikut:

$(function(){
    //获取弹窗窗口对象
    var pop = $("#popup");
    //获取窗口的宽高
    var popWidth = pop.width();
    var popHeight = pop.height();
    //计算窗口的位置
    var left = ($(window).width() - popWidth) / 2;
    var top = ($(window).height() - popHeight) / 2;
    //设置弹窗窗口的位置
    pop.css({
        "position": "absolute",
        "left": left,
        "top": top
    });
});

Dalam kod di atas, kita mula-mula mendapatkan objek tetingkap timbul, kemudian mendapatkan lebar dan ketinggian tetingkap, dan mengira kedudukan tetingkap. Kemudian, tetapkan kedudukan tetingkap pop timbul dengan menetapkan kaedah gaya css.

Kaedah 2: kaedah pemalam jquery

Selain kaedah css, jquery juga mempunyai beberapa pemalam berkuasa yang boleh membantu kami memusatkan tetingkap pop timbul dengan lebih mudah. Berikut ialah pengenalan ringkas kepada dua pemalam praktikal.

1. jqueryui

jqueryui ialah pemalam sambungan untuk jquery yang menyediakan set komponen dan kesan UI yang kaya. Antaranya, komponen dialog jqueryui sering digunakan untuk memaparkan dan mengawal tetingkap pop timbul. Kami hanya perlu menetapkan atribut kedudukan tetingkap dialog ke tengah untuk mencapai kesan pemusatan Kod adalah seperti berikut:

$(function(){
    //创建dialog对象
    $("#popup").dialog({
        position: {my: "center", at: "center", of: window}
    });
});

Dalam kod di atas, kami mencipta objek dialog dan kemudian menetapkan nilai bagi. atribut kedudukan untuk menjadikan objek Berpusat. Antaranya, nilai atribut saya dan pada ditetapkan kepada "pusat", yang masing-masing menunjukkan penjajaran objek itu sendiri dan objek sasaran (iaitu nilai atribut ditetapkan kepada tetingkap, yang menunjukkan bahawa sasaran objek ialah tetingkap penyemak imbas.

2. pemalam tengah

pemalam tengah ialah pemalam jquery yang boleh digunakan untuk memusatkan sebarang elemen. Kami hanya perlu memperkenalkan pemalam dalam kod dan memanggil kaedah yang sepadan untuk mencapai kesan pemusatan pop timbul Kod adalah seperti berikut:

$(function(){
    //获取元素对象
    var pop = $("#popup");
    //使用center插件居中
    pop.center();
});

Dalam kod di atas, kami mula-mula mendapatkan objek elemen. dan kemudian panggil kaedah pusat plug-in center() boleh mencapai kesan pemusatan elemen. Perlu diingatkan bahawa pemalam ini adalah penyederhanaan fungsi jquery-ui.dialog, jadi anda perlu memastikan bahawa fail jquery-ui yang berkaitan telah diperkenalkan semasa penggunaan.

Ringkasan

Dalam artikel ini, kami memperkenalkan dua kaedah untuk mencapai pemusatan tetingkap pop timbul jquery: css dan pemalam jquery. Dengan menetapkan gaya CSS elemen atau memanggil pemalam jquery yang sepadan, kami boleh mencapai kesan pemusatan tetingkap pop timbul dengan mudah, dengan itu memberikan pengguna pengalaman menyemak imbas yang lebih baik. Sama ada dalam bidang pembangunan web atau aplikasi mudah alih, kita boleh memilih kaedah yang sesuai mengikut situasi sebenar untuk menjadikan tetingkap pop timbul lebih cantik dan mudah digunakan.

Atas ialah kandungan terperinci Tetapkan tetingkap pop timbul untuk dipusatkan dalam jquery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!