首页 web前端 js教程 jQuery弹出层始终垂直居中相对于屏幕或当前窗口_jquery

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

May 16, 2016 pm 05:38 PM
垂直居中 屏幕 弹出层

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

复制代码 代码如下:





无标题文档


//浏览器窗口垂直居中

//当前窗口垂直居中







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

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

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




本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

iPhone屏幕截图不起作用:如何修复 iPhone屏幕截图不起作用:如何修复 May 03, 2024 pm 09:16 PM

屏幕截图功能在您的iPhone上不起作用吗?截屏非常简单,因为您只需同时按住“提高音量”按钮和“电源”按钮即可抓取手机屏幕。但是,还有其他方法可以在设备上捕获帧。修复1–使用辅助触摸使用辅助触摸功能截取屏幕截图。步骤1–转到您的手机设置。步骤2–接下来,点击以打开“辅助功能”设置。步骤3–打开“触摸”设置。步骤4–接下来,打开“辅助触摸”设置。步骤5–打开手机上的“辅助触摸”。步骤6–打开“自定义顶级菜单”以访问它。步骤7–现在,您只需将这些功能中的任何一个链接到屏幕捕获即可。因此,点击那里的首

如何在iPhone中撤消从主屏幕中删除 如何在iPhone中撤消从主屏幕中删除 Apr 17, 2024 pm 07:37 PM

从主屏幕中删除了重要内容并试图将其取回?您可以通过多种方式将应用程序图标放回屏幕。我们已经讨论了您可以遵循的所有方法,并将应用程序图标放回主屏幕如何在iPhone中撤消从主屏幕中删除正如我们之前提到的,有几种方法可以在iPhone上恢复此更改。方法1–替换应用程序库中的应用程序图标您可以直接从应用程序库将应用程序图标放置在主屏幕上。第1步–横向滑动以查找应用程序库中的所有应用程序。步骤2–找到您之前删除的应用程序图标。步骤3–只需将应用程序图标从主库拖动到主屏幕上的正确位置即可。这是将应用程序图

6000 毫安硅负极电池!小米 15Pro 升级再曝料 6000 毫安硅负极电池!小米 15Pro 升级再曝料 Jul 24, 2024 pm 12:45 PM

7月23日消息,博主数码闲聊站爆料称,小米15Pro电池容量增大至6000mAh,支持90W有线闪充,这将是小米数字系列电池最大的Pro机型。此前数码闲聊站透露,小米15Pro的电池拥有超高能量密度,硅含量远高于竞品。硅基电池在2023年大规模试水后,第二代硅负极电池被确定为行业未来发展方向,今年将迎来直接竞争的高峰。1.硅的理论克容量可达4200mAh/g,是石墨克容量的10倍以上(石墨的理论克容量372mAh/g)。对于负极而言,当锂离子嵌入量达到最大时的容量为理论克容量,这意味着相同重量下

屏幕录制变黑:这是修复 屏幕录制变黑:这是修复 May 03, 2024 pm 09:13 PM

您是否正在尝试在手机屏幕上录制某些内容,并且它正在变黑?通常,您可以从控制中心启动屏幕录制。在某些情况下,您无法在屏幕上录制项目。我们已经提到了所有方案以及可以帮助您正常录制屏幕的可能解决方案列表。屏幕录制变黑的原因–如果您在iPhone屏幕上播放时尝试录制任何受DRM(数字版权管理)保护的内容,您将无法得到任何东西。输出将是一个漆黑的屏幕。所有领先的OTT平台,如Netflix、Disney+、Hulu和Peacock,都有这个DRM,可以阻止任何屏幕录制功能。2.有几个网站禁止使用屏幕捕获

html如何让文本框居中 html如何让文本框居中 Apr 22, 2024 am 10:33 AM

HTML 文本框居中有多种方式:文本输入框:使用 CSS 代码 input[type="text"] { text-align: center; }文本区域:使用 CSS 代码 textarea { text-align: center; }水平居中:在文本框父元素上使用 text-align: center 样式垂直居中:使用 vertical-align 属性 input[type="text"] { vertical-align: middle; }Flexbox:使用 display:

css中怎么让ul内容居中 css中怎么让ul内容居中 Apr 26, 2024 pm 12:24 PM

在CSS中使UL内容居中:使用text-align属性: 设置文本的对齐方式,包括列表项的内容。使用margin属性: 设置元素的左右边距,使用margin: auto实现水平居中。使用display属性: 将元素设置为inline-block,然后使用text-align: center垂直居中。使用flexbox属性: 通过justify-content: center和align-items: center实现水平和垂直居中。

html怎么把框架居中 html怎么把框架居中 Apr 22, 2024 am 10:45 AM

有四种方法可将 HTML 框架居中:margin: 0 auto;:使框架水平居中。text-align: center;:使框架内容水平居中。display: flex; align-items: center;:使框架垂直居中。position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);:使用 CSS 转换在固定尺寸框架的容器中心放置框架。

荣耀X60i手机明日上市:视觉四等边OLED直屏 荣耀X60i手机明日上市:视觉四等边OLED直屏 Jul 25, 2024 pm 01:54 PM

7月25日消息,荣耀X60i手机将于明日(7月26日)10:08开启预售,该手机采用轻量化设计,重量约172g,厚度约7.18mm。荣耀X60i采用居中挖孔直屏设计,四边近乎无界的超窄边框,极大地拓宽了视野边界。后置摄像头模组以优雅的竖排布局呈现,辅以闪光灯点缀于右侧,既彰显科技感又不失简约之美,整体设计灵感似乎与华为Pura70系列遥相呼应,却又不失自我特色。色彩选择方面,荣耀X60i精心调配了四款时尚配色:幻夜黑云水蓝月影白珊瑚紫满足不同人群的个性化审美需求。硬件配置同样不容小觑,荣耀X60

See all articles