微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
最近更新
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程
自媒体 新闻
首页 > web前端 > js教程 > 正文

js与css实现弹出层覆盖整个页面的方法_javascript技巧

php中文网
发布： 2016-05-16 16:27:37
原创
1920人浏览过

本文实例讲述了js与css实现弹出层覆盖整个页面的方法。分享给大家供大家参考。具体实现方法如下：

弹出层透明背景加框的常用样式和结构如下:

复制代码 代码如下:
.alertMessageBg{
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}
.alertMessageDivBorder{
position:fixed;
_position:absolute;
width:750px;
height:370px;
left:50%;
top:50%;
margin:-185px 0 0 -375px;
background:#000;
filter:alpha(opacity=30);
-moz-opacity:0.3;
opacity:0.3;
z-index:98;
display:none;
}
.alertMessageDiv{
position:fixed;
_position:absolute;
width:730px;
height:350px;
left:50%;
top:50%;
margin:-175px 0 0 -365px;
background:#fff;
z-index:99;
display:none;
font-size:14px;
}



弹出层背景覆盖整个网页的方法

1.css方法

降重鸟
降重鸟

要想效果好，就用降重鸟。AI改写智能降低AIGC率和重复率。

降重鸟 308
查看详情 降重鸟
复制代码 代码如下:
.alertMessageBg{
position:fixed;
_position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}

2.js方法

复制代码 代码如下:
.alertMessageBg{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:#000;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50);
z-index:97;
display:none;
}

var bgWidth = document.body.clientWidth + 'px',
　　bgHeight = document.body.clientHeight + 'px',
　　alertBgNode = $('.alertMessageBg');
alertBgNode.css({'width':bgWidth,'height':bgHeight});

对比以上两种方法，显然css方法更省事，尤其在不用兼容ie6的现在。

希望本文所述对大家基于JS的web程序设计有所帮助。

相关标签：
js css

大家都在看：

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习？java怎么入门？java在哪学？java怎么学才快？不用担心，这里为大家提供了java速学教程(入门到精通)，有需要的小伙伴保存下载就能学习啦！

下载
来源：php中文网
收藏 点赞
上一篇：js 左右悬浮对联广告代码示例_布局与层 下一篇：javascript实现修改微信分享的标题内容等_javascript技巧
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
最新问题
JavaScript持续集成_GitHub Actions配置 首先创建.github/workflows/ci.yml文件，配置在main分支推送或PR时触发，使用Ubuntu环境矩阵测试Node.js16/18/20版本，依次执行依赖安装、代码检查、测试与覆盖率生成。
2025-11-18 21:34:02
944
JavaScript数据结构_链表与树形结构算法实现 链表和树是JavaScript中处理动态与层级数据的关键结构。链表通过节点链接实现高效插入删除，适用于频繁修改的场景；树形结构如二叉树则用于表示层次关系，支持前序、中序、后序和层序遍历，常用于DOM、文件系统等。两者结合递归与指针操作，为算法设计提供基础支撑。
2025-11-18 21:33:06
886
JavaScript异步编程_Promise与Async/Await实战 Promise和Async/Await是解决JavaScript异步编程问题的核心工具。Promise通过resolve/reject控制异步状态，支持链式调用与错误捕获；Async/Await以同步语法处理异步逻辑，提升可读性。实战中应合理使用Promise.all()进行并发控制，避免滥用await，并始终结合try/catch处理异常，确保代码健壮性。
2025-11-18 21:29:02
350
JavaScript_PDF文档处理与渲染 使用PDF.js渲染、jsPDF生成，结合文件上传与交互功能，实现前端PDF处理，注意性能与安全。
2025-11-18 21:26:02
685
JavaScript数据绑定_双向绑定与脏检查机制 双向绑定指模型与视图互相关联，一方变化即触发另一方更新，Vue通过Object.defineProperty或Proxy实现；脏检查则由AngularJS采用，定期遍历比对数据变化，虽兼容好但性能差。
2025-11-18 21:25:37
282
JavaScript渲染优化_重绘与回流避免策略 重绘与回流是影响页面渲染性能的关键，回流因布局变化触发且开销大，重绘仅外观改变成本较低；避免频繁操作可通过批量修改DOM、合并样式变更、缓存布局属性、使用transform/opacity动画及合理CSS布局实现。
2025-11-18 21:25:28
858
数据不可变：immer.js与immutable.js对比 答案：immer.js更适合现代前端开发。它通过Proxy实现接近原生JS的写法，降低学习成本，体积小、易集成，尤其适配ReduxToolkit；而immutable.js虽性能稳定、兼容性好，但需使用专属类型且体积大，更适合老项目或复杂数据结构操作。两者均保障不可变性，选择取决于项目需求。
2025-11-18 21:25:02
861
JavaScript迭代器_生成器函数与异步迭代实现 迭代器与生成器提供处理数据序列的灵活机制，尤其适用于异步编程；2.可迭代对象需实现Symbol.iterator方法，返回具备next()的迭代器；3.常见如数组、字符串等支持for...of遍历；4.通过生成器函数可轻松创建迭代器，结合异步迭代可优雅管理资源与流式数据。
2025-11-18 21:23:02
922
JS函数如何定义参数_JS函数参数定义与传递方式教程 JavaScript函数通过形参定义接收实参，支持默认值、arguments对象和...rest参数处理不定数量输入。ES6默认参数提升容错性，原始类型按值传递不改变外部变量，引用类型传地址可修改属性，合理运用可增强代码灵活性与复用性。
2025-11-18 21:19:02
417
移动端JavaScript_Capacitor混合开发 Capacitor是由Ionic团队开发的开源运行时，用于将Web应用打包为原生移动应用。它支持前端技术栈（如React、Vue）通过原生桥接访问设备功能，相比Cordova更现代化，具备更好的原生集成、TypeScript支持和PWA兼容性。核心优势包括可在Xcode和AndroidStudio中直接开发、模块化插件系统、对摄像头、地理位置、通知等原生功能的支持。开发者可通过npm安装Capacitor，初始化配置后添加iOS和Android平台，构建前端项目并同步至原生工程，使用npxcap
2025-11-18 21:18:06
454
相关专题
更多>
热门推荐
开源免费商场系统广告
热门教程
更多>
相关推荐
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部