点击弹出遮罩层
<div class="mask hide"></div>
<div class="alert hide">
<div class="title">
<h2>标题</h2>
</div>
<div class="content">
内容
</div>
<div class="button">
<button>确定</button>
<button>取消</button>
</div>
</div>
<script src="jquery.js"></script>
<script>
$(function () {
$('#btnTest').click(function () {
$('.mask').removeClass('hide').css({
height: $('html').height()
});
$('.alert').removeClass('hide').css({
left: ($('html').width() - $('.alert').width()) / 2,
top: ($(window).height() - $('.alert').height()) / 2
});
})
$('.alert .button button').click(function () {
$('.mask').addClass('hide');
$('.alert').addClass('hide');
})
$(window).resize(function () {
$('.mask').css({
height: $('html').height()
});
$('.alert').css({
left: ($('html').width() - $('.alert').width()) / 2,
top: ($(window).height() - $('.alert').height()) / 2
});
})
})
</script>