类似于百度的隐藏登录显示

最新推荐文章于 2023-05-21 16:44:48 发布

一切会更好

最新推荐文章于 2023-05-21 16:44:48 发布

阅读量104

点赞数

分类专栏： java前端文章标签：类似一百度的隐藏登录显示

本文链接：https://blog.csdn.net/weixin_45165848/article/details/98512328

版权

java前端专栏收录该内容

20 篇文章 0 订阅

订阅专栏

主要是用到 $KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲modal").fadeIn(\dots$ ("#modal").fadeOut(500);对样式进行显示。

代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#modal{
				display: none;
			
				position: fixed;
				left: 0;
				right: 0;
				top: 0;
				bottom: 0;
				background: rgba(0,0,0,0.7);
			
			}
			.login-box{
			    position: fixed;		
			    left:35%;
			    top: 35%;
				width:275px;
				height:260px;
				padding-left:25px;
				padding-top: 40px;
				background: #FFFFFF;
			
			}
			span{
				position: absolute;
			    right: 10px;
			    top: 10px;
			    cursor: pointer;
			}
			input{
				width: 250px;
				height:30px;
				margin-bottom:35px ;
			}
		</style>
	</head>
	<body>
		<div >
			<a  href="#" class="log">登录</a>
		</div>
		<div id="modal">
			
			<div class="login-box">
				<span class="toclose">&times;</span>
				<div><input type="text" name="" id="" value=""  placeholder="用户名"/></div>
				<div><input type="text" name="" id="" value="" placeholder="用户名"/></div>
				<div><input type="button" name="" id="" value="登录" /></div>				
			</div>
		</div>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".log").click(function(){
//					$("#modal").show(500);
					$("#modal").fadeIn(500);
				})
				$(".toclose").click(function(){
//					$("#modal").hide(500);
					$("#modal").fadeOut(500);
				})
			})
		</script>
	</body>
</html>

运行结果
在这里插入图片描述

在这里插入图片描述

一切会更好

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
类似于百度的隐藏登录显示

主要是用到KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲modal").fadeIn(…("#modal").fadeOut(500);对样式进行显示。代码<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
复制链接

扫一扫