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字符集
一.什么是Oracle字符集 Oracle字符集是一个字节数据的解释的符号集合,有大小之分,有相互的包容关系.ORACLE 支持国家语言的体系结构允许你使用本地化语言来存储,处理,检索数据.它使数据库 ...
- 打印Java main方法执行的命令参数代码
RuntimeMXBean bean = ManagementFactory.getRuntimeMXBean(); List<String> jvmArgs = bean.getInpu ...
- Neutron分析（7）—— neutron-l3-agent HA solutions
1. keepalived vrrp/conntrackd High availability features will be implemented as extensions or driver ...
- [转] matlab saveas 和imwrite的区别
http://hi.baidu.com/curbzz/item/04a69e805fc334e3e596e035 saveas(handle,['目录','文件名']) 如果只有一幅图,handle设 ...
- Jquery中的offset()和position()
今天遇到这个偏移量的问题,特做此记录.以便日后查看. 先看看这两个方法的定义. offset(): 获取匹配元素在当前视口的相对偏移. 返回的对象包含两个整形属性:top 和 left.此方法只对可见 ...
- DNS查询指令host
描述: Host指令提供一个简单的DNS解析的功能.正常地使用名称到IP的解析,当指令没有任何参数和选项的时候,它将输出简单的带命令行参数和选项的概要. 名称是可以被解析的域名,也可以是点分十进制的I ...
- TCP/IP四层模型和OSI七层模型的概念
转:http://blog.csdn.net/superjunjin/article/details/7841099/ TCP/IP四层模型 TCP/IP是一组协议的代名词,它还包括许多协议,组成了T ...
- activiti自定义流程之整合（二）：使用angular js整合ueditor创建表单
注:整体环境搭建:activiti自定义流程之整合(一):整体环境配置 基础环境搭建完毕,接下来就该正式着手代码编写了,在说代码之前,我觉得有必要先说明一下activit自定义流程的操作. 抛开自定义 ...
- 黄聪：MYSQL提交一批ID，查询数据库中不存在的ID并返回
假设你数据库有个A表: ID NAME 1 aaa 2 bbb 3 ccc 4 ddd 需求:给你几个ID,返回A表中不存在的ID? 例如提交1,2,8,9 返回8,9 sel ...
- git 使用详解（8）-- tag打标签
打标签 同大多数 VCS 一样,Git 也可以对某一时间点上的版本打上标签.人们在发布某个软件版本(比如 v1.0 等等)的时候,经常这么做.本节我们一起来学习如何列出所有可用的标签,如何新建标签,以 ...