css遮盖层

最新推荐文章于 2024-07-30 22:36:34 发布

youzhibing01

最新推荐文章于 2024-07-30 22:36:34 发布

阅读量785

点赞数

分类专栏： web前端文章标签： javascript html css ViewUI

web前端专栏收录该内容

11 篇文章 0 订阅

订阅专栏

网上例子很多，但是缺乏一个从简开始的讲解，今天碰到了这个问题，这里拿出来跟大家分享下；既然是从简开始，那么一些css效果在后续补上，关键是看怎么实现这个遮盖效果！
[color=red][b]实现遮盖的关键点是用position属性来对页面进行立体的分层，利用上层覆盖下层的原理来实现，如果不理解position属性的朋友可以先去看看我的另一篇博客[url]http://youzhibing.iteye.com/admin/blogs/2126710[/url][/b][/color]
html代码附上（[color=olive]决定页面有什么[/color]！）：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>灰度覆盖</title>
<link rel="stylesheet" href="css/override.css" type="text/css" />
<script type="text/javascript" src="js/override.js"></script>
</head>

<body>
	<a href="javascript:choose_open()" class="edit">[从地址簿中选择]</a>  	

	<!-- 表单层 -->
	<div id="choose_accept">

    	<!-- 表单头部 -->
            <a class=close href="javascript:choose_close();">[close]</a>

            <table>
                <tr>
                    <td colspan="3" class="td">   
                    </td>
                </tr>
                <tr>
                    <td class="td1">登录名：</td>
                    <td class="td2"><input type="text"/></td>
                    <td class="td3">*</td>
                </tr>
                <tr>
                    <td class="td1">密  码：</td>
                    <td class="td2"><input type="password"/></td>
                    <td class="td3">*</td>
                </tr>
                <tr>
                    <td class="td1">验证码：</td>
                    <td class="td2"><input type="text"/></td>
                    <td class="td3">*</td>
                </tr>
                <tr>
                    <td colspan="3" align="center"><input type="submit" value="登陆"/></td>

                </tr>
            </table>
    </div>

        <!-- 遮盖层 -->
    <div id="mid"></div>
</body>
</html>

注意css文件和js文件的应用，路径别用错了就好！
js代码很简单（[color=brown]页面能做什么[/color]）

function choose_open(){
	document.getElementById('choose_accept').style.display="block";	//打开登陆页面；
	document.getElementById('mid').style.display="block";	//打开遮罩层；
}

function choose_close(){
	document.getElementById('choose_accept').style.display="none";	//关闭登陆页面；
	document.getElementById('mid').style.display="none";	//关闭遮罩层；
}

css代码也是简单的显示效果，没有增加修饰（[color=brown]页面长什么样[/color]）


/* CSS Document */


/* 登录层 */
#choose_accept{
	display:none;
	width:360px;
	height:230px;
	background:#69F;
	position:absolute;
	top:30%;
	left:40%;
	z-index:1000;
	opacity:0.8;						/*背景的透明度:(Firefox适用；）*/
	filter:alpha(opacity =80);			/*背景的透明度:(IE适用)；*/
}

/*遮罩层*/
#mid{
	display:none;
	width:100%;
	height:100%;
	background:#000;
	position:absolute;
	top:0;
	left:0;
	z-index:10;
	opacity:0.4;						/*背景的透明度:(Firefox适用；）*/
	filter:alpha(opacity =40);			/*背景的透明度:(IE适用)；
}

css效果的话大家可以自己补上；有问题可以留言，一起交流！

youzhibing01

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
css遮盖层

网上例子很多，但是缺乏一个从简开始的讲解，今天碰到了这个问题，这里拿出来跟大家分享下；既然是从简开始，那么一些css效果在后续补上，关键是看怎么实现这个遮盖效果！ [color=red][b]实现遮盖的关键点是用position属性来对页面进行立体的分层，利用上层覆盖下层的原理来实现，如果不理解position属性的朋友可以先去看看我的另一篇博客[url]http://yo...
复制链接

扫一扫

专栏目录