ajax实现遮罩层,jQuery如何实现弹出框及遮罩层效果

HTML：

Document

X

哈哈哈哈哈哈哈

javascript：

$(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'});

}

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;

}

本文由职坐标整理发布，欢迎关注职坐标WEB前端jQuery频道，获取更多jQuery知识！