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
随机推荐
- [原]在Fedora 20环境下安装系统内核源代码
1.安装Kernel Headers(头文件) 通过安装kernel-devel RPM包就可以得到Kernel Headers,但默认情况下没有被Fedora 20安装.通过DVD ISO 或者 y ...
- java hashtable
java hashtable Hashtables提供了一个很有用的方法可以使应用程序的性能达到最佳. Hashtables(哈希表)在计算机领域中已不 是一个新概念了.它们是用来加快计算机的处理速度 ...
- Bouncycastle中的RSA技术以及解决之道
一个使用bouncycastle进行安全操作的实用类 2007-04-13 12:54 import java.io.*;import java.security.*;import java.secu ...
- Neutron分析（7）—— neutron-l3-agent HA solutions
1. keepalived vrrp/conntrackd High availability features will be implemented as extensions or driver ...
- visibility和display的区别
大多数人很容易将CSS属性display和visibility混淆,它们看似没有什么不同,其实它们的差别却是很大的. visibility属性用来确定元素是显示还是隐藏的,这用visibility=& ...
- Python 通过print将数据保存到文件中
1. Print them to screen man = [] other = [] try: data = open('sketch.txt') for each_line in data: tr ...
- Python builtins
>>> dir (__builtins__) ['ArithmeticError', 'AssertionError', 'AttributeError', 'BaseExcepti ...
- android学习笔记22——Notification
Notification ==> Notification是显示在手机状态栏的消息,位于手机屏幕的最上方: 一般显示手机当前网络.电池状态.时间等: Notification所代表的是一种全局效 ...
- C++设计新思维的traits和policy
http://blog.csdn.net/zhoudaxia/article/details/4486487 这篇博客讲得挺清楚的,本来想自己写写看总结下的,不过看了下这个文章已经写得很清楚了,倒没有 ...
- ADF_Database Develop系列1_通过UML数据库开发之建Logical UML Class Model
2013-05-01 Created By BaoXinjian