Jquery全屏遮罩层DIV的实现代码

发布时间:2020-11-23编辑:脚本学堂
本文介绍下,用Jquery实现全屏遮罩Div的一段代码,经常用得到,分享给大家。

1、引入外部jquery文件
比如:

<script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

2、点击按钮时的JQuery代码
 

复制代码 代码示例:

<script type="text/javascript">
$(document).ready(function () {

 $("#go").click(function () {
       /*属性*/
       $("#go2").css({ "position": "absolute", "text-align": "center", "top": "0px", "left": "0px", "right": "0px", "bottom": "0px", "background": "red", "visibility": "visible", "filter": "Alpha(opacity=90)"
       });
       /*高为屏幕的高*/
       $("#go2").css({
           height: function () {
           return $(document).height();
       },
           width:"100%"
        });
     });
});

3、html页面代码
 

<asp:Button ID="go" runat="server" Style="width: 380px; position: absolute; top: 249px;left: 425px; background-color: Green; height: 65px;" Text="后台执行程序,前台遮盖,运行完毕后自动消失" OnClick="go_Click" />
<div id="go2">
 正在提交数据...
</div>

4、cs页面部分
 

复制代码 代码示例:
protected void go_Click(object sender, EventArgs e)
{
// System.Threading.Thread.Sleep(5000);
//此处放实际的程序代码
}