jQ遮罩层小练习

最新推荐文章于 2024-07-14 15:54:59 发布

努力比遗憾轻松

最新推荐文章于 2024-07-14 15:54:59 发布

阅读量126

点赞数

分类专栏： js 文章标签： javascript css3 css

本文链接：https://blog.csdn.net/weixin_44775370/article/details/120973017

版权

js 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

jQ遮罩层小demo

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>弹出层</title>
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js" type="text/javascript"></script>
<style type="text/css">
	.zzk{
		position: fixed;/*绝对定位*/
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 980;/*元素的堆叠顺序*/
		background-color: rgba(0, 0, 0, 0.8);
	}
	.kks{
	position: fixed;
		width: 800px;
		height: 546px;
		left: 50%;
		top: 50%;
		margin-top: -273px;
		transform: translateX(-50%);/*对 X 轴的值缩短50%*/
		z-index: 990;
		background-color: rgba(255, 255, 255, 1);
	}
</style>
<script type="text/javascript">
	$(function(){//dom加载完成执行
		hideZzc();
	})
	var showZzc = function(){//展示遮罩层
		$(".zzc").show();
	}
	var hideZzc = function(){//隐藏遮罩层
		$(".zzc").hide();
	}
</script>
</head>
<body>
<div class="xs">
<input type="text">
<button onclick="showZzc()">点击展示遮罩层</button>
</div>
<div class="zzc">
	<div class="kks">
		<input type="text"/>
		<ul>
			<li>1</li>
			<li>2</li>
		<ul>
	</div>
	<div class="zzk" onclick="hideZzc()"></div>
</div>
</body>
</html>

努力比遗憾轻松

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQ遮罩层小练习

jQ遮罩层小demo<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>弹出层</title><script src="http://
复制链接

扫一扫