WEB全栈笔记之弹出层

最新推荐文章于 2022-09-07 11:41:53 发布

萧凝云

最新推荐文章于 2022-09-07 11:41:53 发布

阅读量312

点赞数 1

本文链接：https://blog.csdn.net/qq_36936155/article/details/71189582

版权

<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style type="text/css">
#close{ 
	background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ; 
	width:30px; 
	height:30px; 
	cursor:pointer; 
	position:absolute; 
	right:5px; 
	top:15px; 
	text-indent:100em;
	display: block;
	}
#mask{ 
	background-color:#ccc;
	opacity:0.5;/* 这是设置div的不透明级别 */
	filter: alpha(opacity=50); /* 这是设置div的不透明级别 IE专用 */
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
	width: 100%;
	display: none;
	}
#login{ 
	position:fixed;
	z-index:1001;
	left: 50%;
	top: 50%;
	margin-top: -190px;
	margin-left: -335px;
	display: none;
	}
.loginCon{ 
	/* position:relative; 
	width:670px;
	height:380px;
	background:url(234030lc9b0oc3za0qhogg.png) #2A2C2E center center no-repeat;     
	    background-size:100%; */
	display: block;
	}
.login-btn {
    font-family: 微软雅黑;
    width: 100px;
    height: 40px;
    background: rgb(201, 57, 74);
    text-align: center;
    display: block;
    line-height: 40px;
    font-size: 14px;
    opacity: 0.9;
    text-decoration: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
}
</style>
<script>
window.οnlοad=function(){
	var oMask=document.getElementById('mask')
	var oClose=document.getElementById("close");
	var oBtn=document.getElementById("btnLogin");
	var oLogin=document.getElementById('login')
	var oHeight=document.body.scrollHeight
	oMask.style.height=oHeight+'px'
	console.log(oHeight)
	oBtn.οnclick=function(){
		oMask.style.display='block'
		oLogin.style.display='block'
	}
	oMask.οnclick=oClose.οnclick=function(){
		oMask.style.display='none'
		oLogin.style.display='none'
	}

}				
</script>
</head>
<body>
<div id="header">
  <div class="container" id="nav">
    <div id="login-area">
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
    </div>
  </div>
</div>
<div id="mask"></div>
<div id="login">
	<div class="loginCon" style="border:1px solid #f00;     
	    background-size:100%;">
		<form action="" method="post" class="STYLE-NAME">
			<h1>Contact Form
			<span>Please fill all the texts in the fields.</span>
			</h1>
			<label>
			<span>Your Name :</span>
			<input id="name" type="text" name="name" placeholder="Your Full Name" />
			</label>
			<br>
			<label>
			<span>Your Email : </span>
			<input id="email" type="email" name="email" placeholder="Valid Email Address" />
			</label>
			<br>
			<label>
			<span>Message :  </span>
			<textarea id="message" name="message" placeholder="Your Message to Us"></textarea>
			</label>
			<br>
			<label>
			<span>Subject : </span><select name="selection">
			<option value="Job Inquiry">Job Inquiry</option>
			<option value="General Question">General Question</option>
			</select>
			</label>
			<label>
			<span> </span>
			<input type="button" class="button" value="Send" />
			</label>
			</form>
		<div id="close"></div>
	</div>
</div>
</body>
</html>

弹出层相当于将原来的display元素由none设置为block

再说说这个页面的思路，

首先做一个button按钮设置逻辑事件为按下button进行弹出层行为

<div id="mask"></div>

var oMask=document.getElementById('mask')，是弹出层1，作用是将背景设置为灰色
<div id="login">为弹出层2，通过设置z-index将弹出层2放在弹出层1上面
刚开始将弹出层2和弹出层1的display设置为none此元素不会被显示，然后通过点击onclick事件将两个弹出层显示出来，通过设置display:block(此元素将显示为块级元素，此元素前后会带有换行符。)
显示出来以后再设置事件点击弹出层1未被弹出层2覆盖的部分以及id为close的元素将会将弹出层1和弹出层2的display属性设置为none
这里有一点需要注意如何使弹出层1覆盖整个页面首先div属性是个块级元素它的width和浏览器当前的width相同，然后通过document.body.scrollHeight（scrollHeight指页面的总高度，当前一屏显示高度再加上纵向滚动条滚动到底的高度）
将height=整个页面长度，使这个id=mask的div占满整个页面。
以上是我对于弹出层的理解






如果要弹出一个静态的提示信息可以参照<!DOCTYPE >
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>弹出层</title>
<style type="text/css">
#close{ 
	background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ; 
	width:30px; 
	height:30px; 
	cursor:pointer; 
	position:absolute; 
	right:5px; 
	top:15px; 
	text-indent:100em;
	display: block;
	}
#mask{ 
	background-color:#ccc;
	opacity:0.5;/* 这是设置div的不透明级别 */
	filter: alpha(opacity=50); /* 这是设置div的不透明级别 IE专用 */
	position:absolute; 
	left:0;
	top:0;
	z-index:1000;
	width: 100%;
	display: none;
	}
#login{ 
	position:fixed;
	z-index:1001;
	left: 50%;
	top: 50%;
	margin-top: -190px;
	margin-left: -335px;
	display: none;
	}
.loginCon{ 
	/* position:relative; 
	width:670px;
	height:380px;
	background:url(234030lc9b0oc3za0qhogg.png) #2A2C2E center center no-repeat;     
	    background-size:100%; */
	display: block;
	}
.login-btn {
    font-family: 微软雅黑;
    width: 100px;
    height: 40px;
    background: rgb(201, 57, 74);
    text-align: center;
    display: block;
    line-height: 40px;
    font-size: 14px;
    opacity: 0.9;
    text-decoration: none;
    color: rgb(255, 255, 255);
    cursor: pointer;
}
</style>
<script>
window.οnlοad=function(){
	var oMask=document.getElementById('mask')
	var oClose=document.getElementById("close");
	var oBtn=document.getElementById("btnLogin");
	var oLogin=document.getElementById('login')
	var oHeight=document.body.scrollHeight
	oMask.style.height=oHeight+'px'
	console.log(oHeight)
	oBtn.οnclick=function(){
		oMask.style.display='block'
		oLogin.style.display='block'
	}
	oMask.οnclick=oClose.οnclick=function(){
		oMask.style.display='none'
		oLogin.style.display='none'
	}

}				
</script>
</head>
<body>
<div id="header">
  <div class="container" id="nav">
    <div id="login-area">
      <button id="btnLogin" hidefocus="true" class="login-btn">登录</button>
    </div>
  </div>
</div>
<div id="mask"></div>
<div id="login">
	<div class="loginCon" style="border:1px solid #f00;     
	    background-size:100%;">
	    <iframe src="a.html" height="100px" width="100px" frameborder="0">
		</iframe>
		<div id="close"></div>
	</div>
</div>
</body>
</html>



a.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>test</title>
</head>
<body>
	<p>test</p>
</body>
</html>

萧凝云

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
WEB全栈笔记之弹出层

弹出层#close{ background:url(234021dt3rvxzt1lrl5phz.png) no-repeat ; width:30px; height:30px; cursor:pointer; position:absolute; right:5px; top:15px; text-indent:100em; display: block;
复制链接

扫一扫