Jquery超簡單遮罩層實現代碼

時間 2019-11-12

標籤 jquery 簡單實現代碼欄目 JQuery 简体版

原文原文鏈接

1.樣式以下設置： javascript

CSS代碼： css

<style type="text/css">
#dialog{
z-index: 999;
position: absolute;
display: none;
}
#mask {
position: absolute;
top: 0px;
filter: alpha(opacity=60);
background-color: #777;
z-index: 500;
left: 0px;
display:none;
opacity:0.6;
-moz-opacity:0.5;
cursor:not-allowed;
}
</style>

其中： opacity:0.5;適用於IE， -moz-opacit:0.5;適用於火狐；只須要都加上，即可以火狐和IE下均可以使用。 html

2.指定層的高度、和寬度。 java

js代碼 ajax

<script type="text/javascript"> ide

xxx = function(){ url

//遮罩層
//$("#mask").css("cursor","not-allowed");
$("#mask").css("width",($(document).width()+$(document).scrollLeft()));
$("#mask").css("height",($(document).scrollTop()+$(document).height()));
$("#mask").show();
//彈出層
$("#dialog").load(url);
var left = screen.width/3 ;
var top = screen.height/6 ;
$("#dialog").css("left",left);
$("#dialog").css("top",top)
$("#dialog").toggle(); spa

//設置diaolog高寬 code

........
} htm

</script>

3.在<body>中加入以下代碼，而後就能夠看效果了：

html代碼

<div id="mask" >
</div>

<div id="dialog" >
</div>

4.使用方法：

在ajax提交表單後，加上showMask方法，數據返回後，加上hideMask()

相關文章

相關標籤/搜索

超簡單、附源碼

jQuery Mobile 教程

紅包項目實戰

代碼格式化

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

最新文章

本站公眾號

歡迎關注本站公眾號,獲取更多信息

相關文章

>>更多相關文章<<