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
随机推荐
- ORACLE 常用数值函数
1 ABS(n)返回数值弄参数的绝对值.它接受一个数值型值作为输入参数,或者任何可以隐式地转换为数值型值的值.并且返回数值型值的绝对值. Select abs(-1) from dual ABS(-1 ...
- JdbcUtils
JdbcUtils 项目结构 db.properties driverClass=com.mysql.jdbc.Driver url=jdbc:mysql:///myTest username=r ...
- presto访问 Azure blob storage
当集群使用Azure Blog Storage时,prestoDB无法获取返回结果,在此记录下 如下,hive里面的两个表,一个使用的是本地的hdfs,一个是使用 azure blob storage ...
- centos curl版本nss改成openssl
在centos 6.2的系统里面的curl支持的https是nss版本的,而不是openssl的,所以在php使用curl访问https的时候会报Unable to load client key - ...
- OC—设计模式-通知的使用
通知 通知(广播) 可以一对多的发送通知(一个发送者 多个观察者) 特别注意:在发送者 发送通知的时候,必须有观察者 发送者,就是注册一个通知中心,以他为中心,发送消息 通过通知的名字,来判断是哪个通 ...
- 【jmeter】搭建持续集成接口测试平台(Jenkins+Ant+Jmeter)
一.环境准备: 1.JDK:http://www.oracle.com/technetwork/java/javase/downloads/index.html 2.Jmeter:http://jme ...
- HackerRank "Permutation game"
A typical game theory problem - Recursion + Memorized Searchhttp://justprogrammng.blogspot.com/2012/ ...
- HTML常用标签(自用，可能不严谨，勿怪)
html标签中‘<’和‘>’默认被占用,如果想要显示出这些符号,就需要使用特殊字符来实现'<':使用<实现'>':使用>实现空格:html中再多的空格默 ...
- 【Mongodb】3.0 配置身份验证db.createUser（）说明
原文地址:http://bbs.51cto.com/thread-1146654-1.html 定义: 创建一个数据库新用户用db.createUser()方法,如果用户存在则返回一个用户重复错误. ...
- 导航栏4种效果---原生js
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...