简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Maison > interface Web > js tutoriel > le corps du texte

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

WBOY
Libérer： 2016-05-16 18:01:35
original
1088 Les gens l'ont consulté

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

复制代码 代码如下:





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






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



确定要删除吗？







Étiquettes associées：
弹出提示框
source：php.cn
Article précédent：封装了一个js图片轮换效果的函数_javascript技巧 Article suivant：jQuery EasyUI API 中文文档 - Documentation 文档_jquery
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Derniers numéros
Résoudre les problèmes de build de production des composants Web Vue3 J'essaie de migrer mes composants vue2web vers vue3, bien que le problème survienne lorsqu...
Depuis 2024-04-06 12:43:37
0
1
473
Pourquoi l'info-bulle fonctionne-t-elle toujours après la suppression du lien ? Ce n'est que lorsque je supprime le lien que je vois la balise div avec l'info-bulle. Quel...
Depuis 2024-04-05 09:51:08
0
1
1419
Besoin d'un script jquery pour déplacer les options sélectionnées à partir d'une zone de sélection en fonction de la sélection actuelle de l'utilisateur final J'ai une page HTML où l'utilisateur final peut classer nos articles via un élément de boît...
Depuis 2024-04-04 18:40:04
0
1
3528
Test Cypress pour intercepter l'URL Zoom J'ai un cas de test qui finit par rediriger vers un lien Zoom. J'essaie d'éviter que le na...
Depuis 2024-04-04 16:16:37
0
1
340
La classe de lignes CSS fait sortir certains éléments du cadre, alors qu'ils devraient être statiques et fixés au bas de l'écran. Ma page ressemble actuellement à ceci. Après avoir ajouté la classe de lignes afin que les...
Depuis 2024-04-03 18:48:12
0
1
281
Rubriques connexes
Plus>
Recommandations populaires
Tutoriels populaires
Plus>
Tutoriels associés
Recommandations populaires
Derniers cours
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois：Formation PHP en ligne sur le bien-être public，Aidez les apprenants PHP à grandir rapidement！