原生的弹出层效果

最新推荐文章于 2024-05-21 18:34:13 发布

小贵子的博客

最新推荐文章于 2024-05-21 18:34:13 发布

阅读量498

点赞数

分类专栏： css 文章标签：弹出层模态框

本文链接：https://blog.csdn.net/zyg1515330502/article/details/81904809

版权

css 专栏收录该内容

4 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>弹窗</title>
		<style type="text/css">
			/*左浮动*/
			
			.fl {
				float: left!important;
			}
			/*右浮动*/
			
			.fr {
				float: right!important;
			}
			/*清楚浮动*/
			
			.clearfix:after {
				display: block;
				clear: both;
				content: "";
				visibility: hidden;
				height: 0;
			}
			
			.clearfix {
				zoom: 1
			}
			
			.popWindow {
				text-align: center;
				z-index: 2;
				width: 400px;
				height: 300px;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -150px;
				position: absolute;
				background: #ffffff;
			}
			
			.head-box {
				width: 100%;
				height: 25px;				
				padding: 15px 0px;
				border-bottom: 1px solid #e5e5e5;
			}
			
			.maskLayer {
				background: #9d9d9d;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				filter: alpha(opacity=50);
				opacity: 0.5;
				z-index: 1;
				position: absolute;
			}
			
			#list{
				list-style: none;
				margin: 0;
				padding: 0;
				text-align: left;
			}
			#list li{
				padding: 2px 0px;
			}
		</style>
		<script type="text/javascript">
			function showDiv() {
				document.getElementById('popWindow').style.display = "block";
				document.getElementById('maskLayer').style.display = "block";

			}

			function closeDiv() {
				document.getElementById('popWindow').style.display = "none";
				document.getElementById('maskLayer').style.display = "none";
			}
		</script>
	</head>

	<body>
		<div onclick="showDiv()" style="display:block; cursor:pointer;">
			登录
		</div>
		<div id="popWindow" class="popWindow" style="display:none;">
			<div class="head-box clearfix" >
				<span class="fl" style="padding-left: 10px;">请选择专业分类</span>
				<a href="#" onclick="closeDiv()" class="fr" style="text-decoration:none; cursor:pointer; padding-right: 10px;">
					X 
				</a>
			</div>
			<div class="body-box">
				<ul id="list">
					<li>人类嗜T淋巴细胞病毒抗体监测（HTLV I/II抗体）</li>
					<li>采供血机构病毒核酸检测</li>
					<li>采供血机构血液检验</li>
					<li>地中海贫血基因分型</li>
					<li>感染性疾病血清学标志物系列A</li>
					<li>感染性疾病血清学标志物系列C</li>
					<li>感染性疾病血清学标志物系列B</li>
					<li>常规化学</li>					
				</ul>
				<div id="" style="">
					<input type="button" value="确定" onclick="closeDiv()" style="cursor:pointer;">
				</div>				
			</div>
		</div>
		<div id="maskLayer" class="maskLayer" style="display:none;"></div>
	</body>

</html>

小贵子的博客

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
原生的弹出层效果

&lt;!DOCTYPE html&gt;&lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;弹窗&lt;/title&gt; &lt;style type="text/css"&gt; /*左浮动*/
复制链接

扫一扫