版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yaocong1993/article/details/82630347
<!DOCTYPE html>
<html>
<head>
<meta charset='UTF-8'>
<title></title>
<style>
*{margin:0;padding:0;}
.content{height:1000px;}
.mask{
position:fixed;z-index:998;top:0;left:0;
width:100%;height:100%;
background:rgba(180,180,180,0.5);
}
.login{
position:relative;
width:400px;height:300px;margin:100px auto;border:1px solid;
}
.login>span{
position:absolute;top:0;right:0;
width:50px;height:50px;
background:#f00;
}
</style>
</head>
<body>
<a href="http://www.baidu.com">点我登录</a>
<div class="content">我是段落</div>
<script src='jquery-1.12.4.js'></script>
<script>
$(function(){
$("a").click(function(){
var $mask=$("<div class=\"mask\">\n"+
" <div class=\"login\">\n"+
" <span></span>\n"+
" </div>\n"+
"</div>");
/* 点击登录后弹出登录窗口 */
$("body").prepend($mask);
/* 事件委托（给新增节点添加事件），点击×后关闭登录窗口 */
$("body").delegate(".login>span","click",function(){
$mask.remove();
});
/* 阻止默认事件 */
return false;
});
});
</script>
</body>
</html>