masyarakat Belajar Perpustakaan Alatan Masa lapang
cari
Melayu
Rumah > hujung hadapan web > tutorial js > 基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）_jquery

基于jquery的弹出提示框始终处于窗口的居中位置（类似于alert弹出框的效果）_jquery

WBOY
Lepaskan： 2016-05-16 18:01:35
asal
1208 orang telah melayarinya

原理很简单：
获取当前屏幕（窗体）的宽度和高度，因为不同浏览器的窗体大小是不一样的。有了这个，可以计算出来垂直居中的坐标。但是滑动了滚动条怎么依然垂直居中呢？这个时候就要获取当前窗体距离页面顶部的高度，加到刚刚的y轴坐标即可。
$(document)是获取整个网页的，$(window)是获取当前窗体的，这个要搞清楚。
最后把获取的坐标赋给窗体即可，窗体本身是绝对定位的，所以自然可以到窗体中间。
具体代码：

复制代码 代码如下:





弹出确认框始终位于窗口的中间位置的测试






弹出确认框始终位于窗口的中间位置的测试



确定要删除吗？







Label berkaitan：
弹出提示框
sumber：php.cn
Artikel sebelumnya：封装了一个js图片轮换效果的函数_javascript技巧 Artikel seterusnya：jQuery EasyUI API 中文文档 - Documentation 文档_jquery
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
Artikel terbaru oleh pengarang
Isu terkini
Menyelesaikan isu binaan pengeluaran komponen web Vue3 Saya cuba memindahkan komponen vue2web saya ke vue3, walaupun masalah timbul apabila saya ...
daripada 2024-04-06 12:43:37
0
1
473
Mengapakah petua alat masih berfungsi selepas mengalih keluar pautan? Hanya apabila saya mengalih keluar pautan saya melihat teg div dengan petua alat. Bagaiman...
daripada 2024-04-05 09:51:08
0
1
1419
Perlukan skrip jquery untuk mengalihkan pilihan yang dipilih dari kotak pilihan berdasarkan pemilihan semasa pengguna akhir Saya mempunyai halaman HTML di mana pengguna akhir boleh meletakkan kedudukan item kami me...
daripada 2024-04-04 18:40:04
0
1
3528
Ujian Cypress untuk memintas URL Zum Saya mempunyai kes ujian yang akhirnya mengubah hala ke pautan Zum. Saya cuba mengelakkan ...
daripada 2024-04-04 16:16:37
0
1
340
Kelas baris CSS menjadikan elemen tertentu terkeluar daripada bingkai, manakala ia harus statik dan ditetapkan pada bahagian bawah paparan Halaman saya pada masa ini kelihatan seperti ini. Selepas menambah kelas baris supaya kedu...
daripada 2024-04-03 18:48:12
0
1
281
Topik-topik yang berkaitan
Lagi>
Cadangan popular
Tutorial Popular
Lagi>
Tutorial berkaitan
Cadangan popular
Kursus terkini
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan