遮罩层

最新推荐文章于 2023-12-01 14:40:02 发布

Fw·白

最新推荐文章于 2023-12-01 14:40:02 发布

阅读量68

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/weixin_45189658/article/details/103219339

版权

JavaScript 专栏收录该内容

8 篇文章 3 订阅

订阅专栏

会出现一个高亮窗口进行登录的操作。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.big-link{
				font-size: 70px;
				display: block;/*行内元素变成块状元素*/
				margin-top: 100px;
				color: blue;
				text-decoration: none;
			}
			.reveal-modal{
				position: absolute;
				width: 300px;
				top: 100px;
				left: 200px;
				background: white;
				padding: 30px 40px 34px; /* 上  左右  下 */
				border-radius: 10px;/*圆角*/
				box-shadow: 10px 10px 15px rgba(255,0,0,0.5);
				display: none;
			}
			#mymodal h1{
				background: red;
			}
			.mask{
				display: none;
				position: absolute;
				top: 0;
				left: 0;
				height: 100%;
				width: 100%;
				background: gray;
				opacity: 0.6;/*透明度0.6*/
			}
		</style>
	</head>
	<body>
		<a href="#" class="big-link" onclick="s()">登录</a>
		<div id="mask" class="mask"></div>
		<div id="mymodal" class="reveal-modal">
			<h1>登录</h1>
			<p>
				你好，请输入个人信息
				<a href="javascript:m()">X</a>
			</p>
		</div>
	</body>
	<script src="js/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>
	<script type="text/javascript">
		function s(){
			$("#mask").fadeIn(1000);
			$("#mymodal").fadeIn(1000);
		}
		function m(){
			$("#mask").fadeOut(1000);
			$("#mymodal").fadeOut(1000);
		}
	</script>
</html>

Fw·白

关注

0
点赞
踩
0

收藏

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

会出现一个高亮窗口进行登录的操作。<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .big-link{ font-size: 70px; ...
复制链接

扫一扫

专栏目录