主要是用到KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲modal").fadeIn(…("#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">×</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>
运行结果