jQuery模态对话框 - FACESOHO知行者

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery模态对话框</title>
<style>.box{
border:1px solid #ff5400;
color:#ff5400;
line-height:28px;
border-radius:4px;
width:60px;
text-align:center;
}
/* 遮盖层 */
.box-mask{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,.5);display:none;}
/* 模态框 */
.box-modal{display:none;position:fixed;top:50%;left:50%;margin-left:-150px;margin-top:-75px;
width:300px;height:150px;text-align:center;line-height:150px;background:#fff;border-radius:4px;
}
.box-modal span{font-size:16px;position:absolute;right:10px;top:-55px;cursor:pointer}
</style>
</head><body>
<div class="box">关注</div>
<div class="box-mask"></div>
<div class="box-modal">恭喜你关注成功<span class="close">X</span></div>
<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
// var boxGroupClass = $('.box-mask, .box-modal');
$('.box').click(function(){$('.box-mask, .box-modal').css('display', 'block');});
$('.close').click(function(){$('.box-mask, .box-modal').css('display', 'none');});
// onkeydown 事件会在用户按下一个键盘按键时发生。
window.onkeydown = function (event){ // console.log(event);
if(event.keyCode == 27){ // 如果键盘按下 ESC 同样退出
	$('.box-mask, .box-modal').css('display', 'none')
}}});
</script></body></html>