html+css源码之实现登录弹出框遮罩层效果
在web开发中，很多网站都做了一些特别炫丽的效果，比如用户登录弹框遮罩层效果，本文章向大家介绍css如何实现登录弹出框遮罩层效果，需要的朋友可以参考一下本文章的源代码。
html+css实现登录弹出框遮罩层效果,源代码如下：
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
#lightbox {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
opacity: .6;
}
#main {
position: relative;
background-color: #fff;
z-index: 1;
}
</style>
</head>
<body>
<div id="main">Lorem ipsum, my opactiy is not affected</div>
<p>My opactiy is affected</p>
<div id="lightbox"></div>
</body>
</html>
在线运行
主要使用到css的position相对定位和绝对定位以及z-index属性。
原文地址：http://www.manongjc.com/article/1280.html
html+css源码之实现登录弹出框遮罩层效果的更多相关文章
- js登录弹出框插件
第一步:页面引入css:<link rel="stylesheet" type="text/css"" href="common/cs ...
- 用JQuery写出登录弹出框
类似百度的登录弹出框,可用jquery的fadeIn(),hide(),show(),slideDown()等动画函数实现,一下为html5 代码: <!DOCTYPE html> < ...
- jquery弹出关闭遮罩层实例
jquery弹出关闭遮罩层实例. 代码如下: <!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" & ...
- ifream页面弹出框遮盖层覆盖父页面
1.首先找到子页面上遮罩层的id, 2.然后再父页面编写个js方法 function shade() { $(".layui-layer-shade").height($(wind ...
- 根据juery CSS点击一个标签弹出一个遮罩层的简单示例
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- jQuery点击图片弹出大图遮罩层
使用jQuery插件HoverTreeShow弹出遮罩层显示大图 效果体验:http://hovertree.com/texiao/hovertreeshow/ 在开发HoverTreeTop项目的产 ...
- js实现弹出窗口+遮罩层+tab切换
[功能1]点击约谈按钮,弹出对话框和遮罩层(自己的叫法 专业叫法没有查) [部分重点代码] [下面的方法] (1)获取系统时间如何实现(2)点击如何实现弹出窗口和遮罩层 $(".date_n ...
- jQuery弹出关闭遮罩层
效果体验:http://keleyi.com/keleyi/phtml/jquery/9.htm 完整代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XH ...
- 抽离amazeUI里面的弹出框
花了一些时间读了amazeUI的源码 把他的弹出框给单独抽离出来了,具体可以见源码:http://pan.baidu.com/s/1mibQ9T2
随机推荐
- 【extjs】 Extjs中的Ext.grid.Panel隐藏列会显示在表头中解决方法
在Extjs中的GridPanel会有这样的情况,隐藏列会显示在menuDisabled中,但是这个一般没有什么用处,只是用于后台取值的作用,感兴趣的朋友可以了解下啊,希望本文对你有所帮助 在Ex ...
- SSH_框架整合5--验证用户名是否可用
SSH_框架整合5--验证用户名是否可用 1 emp-input.jsp中编写ajax验证用户名是否可用: <script type="text/javascript" SR ...
- 【initrd】向虚拟文件系统initrd.img中添加驱动
虚拟文件系统:initrd-2.6.18-194.el5.img 希望添加网卡或SCSI等驱动 步骤: 解压initrd-2.6.18-194.el5.img: 添加*.ko文件,并修改init可执行 ...
- svn 同步脚本
REPOS="$1"REV="$2"export LANG=en_US.UTF-8/usr/bin/svn update /home/wwwroot/yswif ...
- 静态库不要strip 太厉害
根据strip的功能表示,strip经常用来去除目标文件中的一些符号表.调试符号表信息,减少包的大小.我自己做了一函数库,同样的代码生成了一个mylib.so和一个mylib.a文件,之后使用了 st ...
- windows7修改双系统启动项名称、先后顺序、等待时间
一.进入BCDEdit.exe 正常启动Windows 7 系统,点击“开始” -> “所有程序” -> “附件”,右击“命令提示符” -> “以管理员身份运行”(需要将操作当前用 ...
- SOA_环境安装系列2_Oracle RCU安装和环境搭建（案例）
2015-01-02 Created By BaoXinjian
- CE_现金预测详解（案例）
2014-07-14 Created By BaoXinjian
- redis使用日志（一） 安装，调试
第一步:下载,安装 root@iZ28fgejjw7Z:/# wget http://download.redis.io/releases/redis-.tar.gz root@iZ28fgejjw7 ...
- Java8之默认方法和静态接口方法
前言 上一篇文章30分钟入门Java8之lambda表达式,我们学习了lambda表达式.现在继续Java8新语言特性的学习,今天,我们要学习的是默认方法和静态接口方法. 这一Java8的新语言特性, ...