php jq遮罩层,jQuery做出页面遮罩层效果

这次给大家带来jQuery做出页面遮罩层效果，jQuery做出页面遮罩层效果的注意事项有哪些，下面就是实战案例，一起来看一下。

遮罩层

.fh-link-bar {

border-top: none;

}

.fh-link-bar {

background-color: #fff;

border: 1px solid #eaeaea;

border-left: none;

border-right: none;

padding: 10px;

height: 50px;

line-height: 30px;

font-size: 14px;

}

#personsex{

float: right;

}

.personsex {

background: magenta;

width: 150px;

height: 180px;

line-height: 40px;

text-align: center;

border-radius: 2px;

z-index: 104; /*层级关系为104*/

/*只是用来控制位置的*/

position: absolute;

margin: 100px auto;

font-size: 20px;

left: 0;

right: 0;

top: 0;

bottom: 0;

}

/*一定要记得添加样式(必须)*/

.loading-shade {

position: fixed; /*窗口定位*/

background: rgba(0,0,0,.5); /*遮罩层的颜色*/

z-index: 102; /*层级关系为102*/

}

.loading-shade{

height: 100%;

width: 100%;

top: 0;

left: 0;

}

性别

男

保密

男

女

//添加页面遮罩

function addShade() {

var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;

$("body").append('

//$(".loading-shade").css("height",htmlHeight+"px");

$(".loading-shade").css("100%");

}/*删除页面遮罩*/

function removeShade() {

$(".loading-shade").remove();

}

/*页面遮罩点击关闭弹出层

* dom=>#id

* type => hide || remove

* */

function closep(dom, type) {

$(".loading-shade").click(function() {

type == "hide" ? $(dom).hide() : $(dom).remove();

$(".loading-shade").remove();

})

}

//需要调用的页面添加的js(这里是点击上边的p(即：.personsex p元素)的时候实现遮罩层消失。)

// $('#sexlog,#personsex').unbind("click").bind("click",function(){

// addShade();

// $('.personsex').show();

// });

//

// $('.personsex p').bind('click',function(){

// $('.loading-shade').remove();

// $('.personsex').hide();

// });

//======================================================================================

//需要调用的页面添加的js(这里是点击遮罩层实现遮罩层(即：.loading-shade)页面关闭)

$('#sexlog,#personsex').unbind("click").bind("click",function(){

addShade();

$('.personsex').show();

del();

});

function del(){

$('.loading-shade').bind('click',function(){

$('.loading-shade').remove();

$('.personsex').hide();

});

}

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：