JQuery全屏遮罩层DIV

最新推荐文章于 2022-07-21 09:40:42 发布

转载最新推荐文章于 2022-07-21 09:40:42 发布 · 722 阅读

本文介绍如何利用jQuery库来实现一个简单的页面遮罩效果。通过点击按钮触发遮罩层显示，并设置遮罩层的高度为当前屏幕高度，宽度为100%，背景颜色为红色并具有一定透明度。此外，还提供了ASP.NET中服务器端按钮点击事件的基础框架。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1、引用 <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
2、点击按钮时的JQuery代码

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

//你的代码

}

1、引用 <script src="Scripts/jquery-1.3.2.min.js" type="text/javascript"></script>
2、点击按钮时的JQuery代码

$(document).ready(function () {