CSS实现覆盖弹窗(效果如JQuery-UI的Dialog)
原理:定义一个新的div用来覆盖整个页面,再把想要弹出的窗口放在这个div上面
1、定义一个div,设置其隐藏(display:none),用于覆盖整个页面,并设置其CSS属性为:
#divBg
{
z-index: 99;
position: absolute;
width: 100%;
height: 100%;
background: #000;
-moz-opacity: 0.5;
opacity: 0.5;
filter: alpha(opacity=20);
}
2、设置要弹出的div的CSS属性为:
#divAdd
{
width: 300px;
height: 348px;
position: absolute;
background: #D6DFF7;
top: 100px;
left: 450px;
z-index: 100;
}
3、弹出窗口的事件:
function ShowAdd() {
if (document.getElementById("divAdd").style.display == "block") {
}
document.getElementById("divAdd").style.position = "absolute";
document.getElementById("divAdd").style.display = "block";
document.getElementById("divBg").style.display = "block";
}
4、关闭窗口的事件:
function CancelAdd() {
document.getElementById("divAdd").style.display = "none";
document.getElementById("divBg").style.display = "none";
}
最新文章
- WEB 用户指南 -- WEB 系统结构文档
- monkey之三:monkey测试测略(摘抄)
- VARCHAR列上的索引
- SOA、ESB、NServiceBus、云计算 总结
- Spark Job的提交与task本地化分析(源码阅读八)
- 【LA 5713 】 Qin Shi Huang's National Road System (MST)
- 论山寨手机与Android联姻 【10】SmartPhone的通信机制
- ThinkPHP第十二天(Import导入第三方类库方法,独立分组文件夹结构)
- 【Android Developers Training】 100. 使用Intent修改联系人数据
- Redis 协议为例谈简单的协议分析
- 在Bootstrap开发中解决Tab标签页切换图表显示问题
- 使用python和selenium写一个百度搜索的case
- mysql常见安全加固策略
- Docker常见命令
- Web页面长时间无操作后再获取焦点时转到登录界面
- linux环境变量配置,转载地址:http://blog.sina.com.cn/rss/1650981242.xml
- RAD Tokyo 10.2.2
- 1105 Spiral Matrix
- springMVC的接受参数三种样例
- [译]Autoprefixer:一个以最好的方式处理浏览器前缀的后处理程序
热门文章
- java_web学习(16)Ajax
- css3实战版的点击列表项产生水波纹动画
- 1.4.2. 实现 Core Data Helper 类(Core Data 应用程序实践指南)
- Delphi ADO数据操作封装类
- jpg图片在开发板上显示
- 分享在MVC3.0中使用jQuery DataTable 插件
- PHP Memcached 实现简单数据库缓存
- ASP.NET - 自定义控件处理页面事件(控件与页面数据交互)的方法
- POJ1273(最大流)
- Hadoop权威指南:HDFS-数据流