css——遮罩层

末蓝、 2022-06-03 06:13 455阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
    	<meta charset="UTF-8">
    	<title>Document</title>
    	<style>
    		#all_con {
    			display: none;
    			background-color: #000;
    			width: 100%;
    			height: 100%;
    			left:0;
    			top:0;/*FF IE7*/
    			filter:alpha(opacity=30);/*IE*/
    			opacity:0.3;/*FF*/
    			z-index:1;
    			position:fixed!important;/*FF IE7*/
    			position:absolute;/*IE6*/
    			_top:       expression(eval(document.compatMode &&
    			document.compatMode=='CSS1Compat') ?
    			documentElement.scrollTop + (document.documentElement.clientHeight-this.offsetHeight)/2 :/*IE6*/
    			document.body.scrollTop + (document.body.clientHeight - this.clientHeight)/2);/*IE5 IE5.5*/
    		}
    		#form_login{
    			display: none;
    			position: relative;
    			z-index: 10;
    		}
    	</style>
    </head>
    <body>
    	<a href="javascript:;" id="login">登录</a>
    	<div id="form_login">
    		<input type="text"><br/>
    		<input type="text"><br/>
    		<input type="button" value="登录">
    	</div>
    	<div id="all_con">
    		
    	</div>
    
    	<script>
    		function getId(id){
    			return document.getElementById(id);
    		}
    		login.οnclick=function(){
    			getId('all_con').style.display='block';
    			getId('form_login').style.display='block';
    		}
    	</script>
    </body>
    </html>

注：z-index的元素需要定位，不然z-index无效。

发表评论取消回复

表情：

评论列表（有 0 条评论，455人围观）

还没有评论，来说两句吧...

相关阅读

相关 css 弹出遮罩层样式

css 弹出遮罩层样式以前做遮罩层都是写最小高度来占满屏，但是总会出现问题，也没改变，今天一个人在交流群上问这个时，看到一个回答解决了我这一个bug，学到了，现在记录一

女爷i/ 2023年02月20日 13:41/ 0 赞/ 25 阅读

相关遮罩层

<view class="pop"> <view class="cont"> 内容 </view> </view> .

深藏阁楼爱情的钟/ 2023年01月11日 13:05/ 0 赞/ 466 阅读

相关 HTML/CSS 遮罩层登录框

HTML/CSS 遮罩层登录框代码： <!DOCTYPE html> <html lang="en"> <head>

秒速五厘米/ 2022年12月31日 13:19/ 0 赞/ 349 阅读

相关 css盒子遮罩层显示与隐藏

实现效果要如图显示： ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9i

浅浅的花香味﹌/ 2022年10月25日 04:53/ 0 赞/ 530 阅读

相关 CSS背景遮罩

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

￡神魔★判官ぃ/ 2022年09月01日 07:59/ 0 赞/ 405 阅读

相关 css——遮罩层

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <ti

末蓝、/ 2022年06月03日 06:13/ 0 赞/ 456 阅读

相关 CSS实现遮罩层

<div id="main"> <button @click="open">open</button> <div cl

短命女/ 2022年05月26日 13:44/ 0 赞/ 501 阅读

相关 css实现缕空遮罩层

最新更新时间：2019年05月13日13:41:01 [`《猛戳-查看我的博客地图-总有你意想不到的惊喜》`][-_-] > 本文内容：页面镂空遮罩层、页面镂空遮罩

柔情只为你懂/ 2022年02月01日 04:29/ 0 赞/ 489 阅读

相关 css 遮罩层简单应用

html <input id="btnshow" type="button" value="Show" onclick="showdiv();"> <div

红太狼/ 2021年10月14日 06:32/ 0 赞/ 542 阅读

相关遮罩层代码

1. 目的 : 直接复制来用, 加快工作效率 <div class="cover"></div> .cover{

我会带着你远行/ 2021年09月17日 04:18/ 0 赞/ 663 阅读