jQuery如何實現頁面遮罩層功能
這篇文章主要介紹了jQuery如何實現頁面遮罩層功能，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
創(chuàng)新互聯是專業(yè)的威海網站建設公司，威海接單;提供成都做網站、網站建設、外貿營銷網站建設,網頁設計,網站設計,建網站,PHP網站建設等專業(yè)做網站服務;采用PHP框架,可快速的進行威海網站開發(fā)網頁制作和功能擴展;專業(yè)做搜索引擎喜愛的網站,專業(yè)的做網站團隊,希望更多企業(yè)前來合作!
具體如下：
www.jb51.net 遮罩層
.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 closeDiv(dom, type) {
$(".loading-shade").click(function() {
type == "hide" ? $(dom).hide() : $(dom).remove();
$(".loading-shade").remove();
})
}
//需要調用的頁面添加的js（這里是點擊上邊的div(即：.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();
});
}
運行效果：
感謝你能夠認真閱讀完這篇文章，希望小編分享的“jQuery如何實現頁面遮罩層功能”這篇文章對大家有幫助，同時也希望大家多多支持創(chuàng)新互聯，關注創(chuàng)新互聯行業(yè)資訊頻道，更多相關知識等著你來學習!
網站標題：jQuery如何實現頁面遮罩層功能
轉載來源：
http://weahome.cn/article/iigphg.html
重慶分公司
重慶分公司
