HTML：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="submit" value="点我">
<!-- 提交按钮弹出DOM部分 -->
<div class="mask"></div>
<div class="box">
<!-- 关闭按钮 -->
<a class="open">X</a>
<!-- 内容 -->
哈哈哈哈哈哈哈
</div>
</body>
</html>
javascript：
<script src="jquery.js"></script>
<script>
$(document).ready(function(){
$("input").click(function(e){
// 阻止默认提交表单事件
e.preventDefault();
// 将弹框位置居中
center($(".box"));
// 遮罩层显示,此处window也可以换成document,区别在于遮罩层高度的差别
$('.mask').show().height($(window).height());
// 弹框显示
$('.box').show();
//弹框弹出后隐藏掉滑动条,阻止了滚轮对页面的控制
$("body").css({overflow:"hidden"});
});
}).keydown(function(e){ //document监听按下esc将关闭弹出框及遮罩层
if(e.keyCode==27){
$('.mask').hide();
$('.box').hide();
// 重新显示滑动条
$("body").css({overflow:"auto"});
}
})
// 关闭按钮
$('.open').click(function(e) {
func_close();
})
// 关闭函数
function func_close(){
$('.mask').hide();
$('.box').hide();
// 重新显示滑动条
$("body").css({overflow:"auto"});
}
// 居中函数
function center(obj){
var screenWidth = $(window).width(), screenHeight = $(window).height(); //当前浏览器窗口的 宽高
var scrolltop = $(window).scrollTop();//获取当前窗口距离页面顶部高度
var objLeft = (screenWidth - obj.width())/2;
var objTop = (screenHeight - obj.height())/2 + scrolltop;
obj.css({"left": objLeft + 'px', "top": objTop + 'px','display': 'block'});
}
</script>
CSS：
/*遮罩层样式*/
.mask{
display:none;
position:absolute;
z-index:10;
left:0;
top:0;
width:100%;
height:100%;
background:#666;
opacity:0.5;
-moz-opacity:0.5;
filter:alpha(opacity=50)
}
/*弹出框样式*/
.box{
z-index:999;
display:none;
position: relative;
width:340px;
height:180px;
border:solid 1px #999;
border-radius:5px;
background-color:#fff;
box-shadow:0 0 0 1px #00aff0;
text-align:center;
padding-top: 20px;
}
/* 关闭按钮 */
.open {
position: absolute;
top: 0;
right: 10px;
}
/*按钮样式*/
input{
display:block;
width:100px;
height:30px;
outline:none;
cursor:pointer;
font-size:16px;
}