Rumah hujung hadapan web tutorial js jQuery弹出层始终垂直居中相对于屏幕或当前窗口_jquery

jQuery弹出层始终垂直居中相对于屏幕或当前窗口_jquery

May 16, 2016 pm 05:38 PM
Pusat secara menegak Skrin lapisan pop timbul

弹出层永远是一个前端必须搞定的东西,一般情况下,如果弹出层有固定的高和宽,用样式即可搞定,但是如果碰到没有固定高或者固定宽或者固定高和宽的时候,我们就需要用JS去处理,去动态获取当前窗口高或者宽;今天弄了2种情况,一个是相对于屏幕窗体,一个是相对于当前的窗口,看代码,或许对你有用:

复制代码 代码如下:





无标题文档


//浏览器窗口垂直居中

//当前窗口垂直居中







我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊
我是当前窗口啊我是当前窗口啊我是当前窗口啊
我是当前窗口啊我是当前窗口啊我是当前窗口啊
我是当前窗口啊我是当前窗口啊我是当前窗口啊
我是当前窗口啊我是当前窗口啊我是当前窗口啊

我是当前窗口啊我是当前窗口啊我是当前窗口啊我是当前窗口啊
我是弹出窗口1111啊
我是弹出窗口1111啊
我是弹出窗口1111啊
我是弹出窗口1111啊
我是弹出窗口1111啊
我是弹出窗口1111啊
我是弹出窗口1111啊

我是弹出窗口2222啊
我是弹出窗口2222啊
我是弹出窗口2222啊
我是弹出窗口2222啊
我是弹出窗口2222啊




Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
3 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tangkapan skrin iPhone tidak berfungsi: Cara membetulkannya Tangkapan skrin iPhone tidak berfungsi: Cara membetulkannya May 03, 2024 pm 09:16 PM

Ciri tangkapan skrin tidak berfungsi pada iPhone anda? Mengambil tangkapan skrin adalah sangat mudah kerana anda hanya perlu menahan butang Naik Kelantangan dan butang Kuasa pada masa yang sama untuk meraih skrin telefon anda. Walau bagaimanapun, terdapat cara lain untuk menangkap bingkai pada peranti. Betulkan 1 – Menggunakan Assistive Touch Ambil tangkapan skrin menggunakan ciri Assistive Touch. Langkah 1 – Pergi ke tetapan telefon anda. Langkah 2 – Seterusnya, ketik untuk membuka tetapan Kebolehcapaian. Langkah 3 – Buka tetapan Sentuh. Langkah 4 – Seterusnya, buka tetapan Assistive Touch. Langkah 5 – Hidupkan Sentuhan Bantu pada telefon anda. Langkah 6 – Buka “Sesuaikan Menu Teratas” untuk mengaksesnya. Langkah 7 – Sekarang anda hanya perlu memautkan mana-mana fungsi ini ke tangkapan skrin anda. Jadi klik pada yang pertama

Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone Bagaimana untuk membuat asal Padam dari Skrin Utama dalam iPhone Apr 17, 2024 pm 07:37 PM

Memadamkan sesuatu yang penting daripada skrin utama anda dan cuba mendapatkannya semula? Anda boleh meletakkan ikon apl kembali pada skrin dalam pelbagai cara. Kami telah membincangkan semua kaedah yang boleh anda ikuti dan meletakkan semula ikon aplikasi pada skrin utama Cara Buat Asal Alih Keluar dari Skrin Utama dalam iPhone Seperti yang kami nyatakan sebelum ini, terdapat beberapa cara untuk memulihkan perubahan ini pada iPhone. Kaedah 1 – Gantikan Ikon Apl dalam Pustaka Apl Anda boleh meletakkan ikon apl pada skrin utama anda terus daripada Pustaka Apl. Langkah 1 – Leret ke sisi untuk mencari semua apl dalam pustaka apl. Langkah 2 – Cari ikon apl yang anda padamkan sebelum ini. Langkah 3 – Hanya seret ikon apl dari pustaka utama ke lokasi yang betul pada skrin utama. Ini adalah gambar rajah aplikasi

Bateri negatif silikon 6000 mAh! Peningkatan Xiaomi 15Pro bocor lagi Bateri negatif silikon 6000 mAh! Peningkatan Xiaomi 15Pro bocor lagi Jul 24, 2024 pm 12:45 PM

Menurut berita pada 23 Julai, blogger Digital Chat Station mengumumkan bahawa kapasiti bateri Xiaomi 15 Pro telah ditingkatkan kepada 6000mAh dan menyokong pengecasan kilat berwayar 90W Ini akan menjadi model Pro dengan bateri terbesar dalam siri digital Xiaomi. Stesen Sembang Digital sebelum ini mendedahkan bahawa bateri Xiaomi 15Pro mempunyai ketumpatan tenaga ultra tinggi dan kandungan silikon jauh lebih tinggi daripada produk pesaing. Selepas bateri berasaskan silikon diuji secara besar-besaran pada tahun 2023, bateri anod silikon generasi kedua telah dikenal pasti sebagai hala tuju pembangunan industri pada tahun ini. 1. Kapasiti gram teoretikal silikon boleh mencapai 4200mAh/g, iaitu lebih daripada 10 kali ganda kapasiti gram grafit (kapasiti gram teoretikal grafit ialah 372mAh/g). Untuk elektrod negatif, kapasiti apabila jumlah kemasukan ion litium mencapai maksimum ialah kapasiti gram teori, yang bermaksud bahawa di bawah berat yang sama

Rakaman skrin menjadi hitam: inilah penyelesaiannya Rakaman skrin menjadi hitam: inilah penyelesaiannya May 03, 2024 pm 09:13 PM

Adakah anda cuba merakam sesuatu pada skrin telefon anda dan ia menjadi hitam? Biasanya, anda boleh memulakan rakaman skrin dari Pusat Kawalan. Dalam sesetengah kes, anda tidak boleh merakam item pada skrin. Kami telah menyebut semua senario bersama-sama dengan senarai kemungkinan penyelesaian yang boleh membantu anda merakam skrin anda dengan betul. Sebab rakaman skrin menjadi hitam – Jika anda cuba merakam sebarang kandungan yang dilindungi DRM (Pengurusan Hak Digital) semasa ia dimainkan pada skrin iPhone anda, anda tidak akan mendapat apa-apa. Outputnya ialah skrin hitam pekat. Semua platform OTT terkemuka seperti Netflix, Disney+, Hulu dan Peacock mempunyai DRM ini yang menyekat sebarang fungsi rakaman skrin. 2. Beberapa laman web melarang penggunaan tangkapan skrin

Bagaimana untuk memusatkan kotak teks dalam html Bagaimana untuk memusatkan kotak teks dalam html Apr 22, 2024 am 10:33 AM

Terdapat banyak cara untuk memusatkan kotak teks HTML: kotak input teks: gunakan input kod CSS[type="text"] { text-align: center } text area: use the CSS code textarea { text-align: center; } pemusatan mendatar: Gunakan gaya penjajaran teks: tengah pada elemen induk kotak teks untuk memusatkannya secara menegak: gunakan input atribut penjajaran menegak[type="text"] { vertical-align: middle }Flexbox: use display:

Bagaimana untuk memusatkan kandungan ul dalam css Bagaimana untuk memusatkan kandungan ul dalam css Apr 26, 2024 pm 12:24 PM

Pusatkan kandungan UL dalam CSS: Gunakan sifat penjajaran teks: Tetapkan penjajaran teks, termasuk kandungan item senarai. Gunakan atribut margin: Tetapkan margin kiri dan kanan elemen, dan gunakan margin: auto untuk mencapai pemusatan mendatar. Gunakan atribut paparan: Tetapkan elemen kepada inline-block, kemudian tengahkannya secara menegak menggunakan text-align: center. Gunakan sifat flexbox: Pemusatan mendatar dan menegak melalui justify-content: center dan align-item: center.

Telefon mudah alih Honor X60i akan dilancarkan esok: skrin langsung OLED segi empat visual Telefon mudah alih Honor X60i akan dilancarkan esok: skrin langsung OLED segi empat visual Jul 25, 2024 pm 01:54 PM

Menurut berita pada 25 Julai, telefon bimbit Honor X60i akan memulakan pra-jualan pada 10:08 esok (26 Julai). Honor X60i menggunakan reka bentuk skrin lurus dengan lubang di tengah dan sempadan ultra-sempit yang hampir tidak terhad pada keempat-empat sisi, yang meluaskan bidang pandangan. Modul kamera belakang dipersembahkan dalam susun atur menegak yang elegan, ditambah dengan denyar di sebelah kanan, yang bukan sahaja menyerlahkan rasa teknologi tetapi juga keindahan kesederhanaan Inspirasi reka bentuk keseluruhan seolah-olah menggemakan siri Huawei Pura70, tetapi tanpa kehilangan ciri-cirinya sendiri. Dari segi pemilihan warna, Honor X60i telah menyediakan empat warna bergaya dengan teliti: Malam Ajaib, Awan Hitam, Biru Air, Bayangan Bulan, Karang Putih dan Ungu untuk memenuhi keperluan estetik yang diperibadikan oleh orang yang berbeza. Konfigurasi perkakasan juga tidak boleh dipandang remeh

Bagaimana untuk memusatkan bingkai dalam html Bagaimana untuk memusatkan bingkai dalam html Apr 22, 2024 am 10:45 AM

Terdapat empat cara untuk memusatkan bingkai HTML: margin: 0 auto;: Pusatkan bingkai secara mendatar. text-align: center;: Tengahkan kandungan bingkai secara mendatar. paparan: flex; align-item: center;: Pusatkan bingkai secara menegak. kedudukan: mutlak; atas: 50%; kiri: 50%; ubah: terjemah(-50%, -50%);: Menggunakan transformasi CSS untuk meletakkan bingkai di tengah-tengah bekas bersaiz tetap.

See all articles