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
随机推荐
- NET 2.0 OCR文字识别技术（Tesseract 引擎）［转］
一.OCR简介 参见http://baike.baidu.com/view/17761.htm?fr=ala0_1 大家参照,我第一次也是这么了解的,呵呵.高手见笑 现在市面上好多OCR 引擎,不 ...
- for循环内 执行$ajax(){}
真是郁闷,在for 循环里添加了ajax异步传输之后,for循环是单线程处理,就是里面执行的是ajax,也不异步处理数据.而是执行完for循环的次数后,一起把ajax的数据处理掉. 解决办法.分开吧! ...
- IAR Embedded Workbench IDE 显示行号
第一次使用IAR Embedded Workbench IDE,默认设置是不现实代码行号的.显示代码行号方法如下:首先选择“Tools”菜单项,打开“IDE Option”对话框,然后在树状图中选择“ ...
- android学习笔记32——资源
Android应用资源 资源分类: 1.无法直接访问的原生资源,保存于asset目录下 2.可通过R资源清单类访问的资源,保存于res目录下 资源的类型以及存储方式 android要求在res目录下用 ...
- xss攻击和sq注入
xss攻击跟SQL注入的原理还是挺简单的,都是利用web是使用字符串进行操作的原理,通过伪造分隔符或者结束符号,来让网页或者服务端来运行输入的代码 一般防御的方法就是在对一些分隔符进行转义,djang ...
- 如何生成RestFul Api文档
Web API文档工具列表Swagger ——Swagger框架可以通过代码生成漂亮的在线API,甚至可以提供运行示例.支持Scala.Java.Javascript.Ruby.PHP甚至 Actio ...
- jQuery formValidator手册
什么是jQuery formValidator? jQuery formValidator表单验证插件是客户端表单验证插件. 在做B/S开发的时候,我们经常涉及到很多表单验证,例如新用户注册,填写个人 ...
- 一个Oracle触发器的示例
CREATE OR REPLACE TRIGGER WoStateChange AFTER UPDATE on csdbuser.T_PD_WorkOrder for each row declare ...
- hiho #1014 : Trie树
#1014 : Trie树 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho是一对好朋友,出生在信息化社会的他们对编程产生了莫大的兴趣,他们约定好互相帮助, ...
- LPC1768之GPIO
在AHB总线上以便IO的高速操作,上电默认为输入高电平,支持GPDMA操作. 1只有GPIO0和GPIO2上的引脚能产生中断,/EXIT0~3特殊的外中断引脚. 2P0.29/0.30很特殊要么同为输 ...