在页面加载时冻结背景页面

本文关键字：背景 冻结 加载 | 更新日期: 2023-09-27 17:53:30

我想如果我的文本框是空的，那么字段验证器显示一个错误消息，如果文本框不是空的，那么页面在加载按钮点击时被冻结。

ASPX代码:

<%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
        CodeFile="Default.aspx.cs" Inherits="_Default" %>
    <asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    </asp:Content>
    <asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
        <style type="text/css">
        .modal
        {
            position: fixed;
            top: 0;
            left: 0;
            background-color: black;
            z-index: 99;
            opacity: 0.8;
            filter: alpha(opacity=80);
            -moz-opacity: 0.8;
            min-height: 100%;
            width: 100%;
        }
        .loading
        {
            font-family: Arial;
            font-size: 10pt;
            border: 5px solid #67CFF5;
            width: 200px;
            height: 100px;
            display: none;
            position: fixed;
            background-color: White;
            z-index: 999;
        }    
    </style>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        function ShowProgress() {
            setTimeout(function () {
                var modal = $('<div />');
                modal.addClass("modal");
                $('body').append(modal);
                var loading = $(".loading");
                loading.show();
                var top = Math.max($(window).height() / 2 - loading[0].offsetHeight / 2, 0);
                var left = Math.max($(window).width() / 2 - loading[0].offsetWidth / 2, 0);
                loading.css({ top: top, left: left });
            }, 200);
        }
        $('form').live("submit", function (){
            ShowProgress();
        });
    </script>
    <asp:Label ID="Label1" runat="server" Text="Roll No : "></asp:Label>
    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
    <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" 
            ControlToValidate="TextBox1" ErrorMessage="*"></asp:RequiredFieldValidator>
    <br />
    <br />
    <asp:Button ID="Button1" runat="server" onclick="Button1_Click" Text="Button" />
    <div class="loading" align="center">
    Loading. Please wait.<br />
    <br />
    <img src="loader.gif" alt="" />
    </div>
    </asp:Content>

我使用visual studio 2010 ASP。Net/C #

在页面加载时冻结背景页面

您可以尝试jQuery的页面阻塞功能BlockUI

我将它与ASP结合使用。Net UpdatePanel，这样我就可以在每次回发时阻止ui。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
   <title></title>
   <script type="text/javascript" src="//code.jquery.com/jquery-2.1.0.min.js"></script>
    <script type="text/javascript" src="http://malsup.github.io/jquery.blockUI.js"></script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="scriptManager" runat="server">
</asp:ScriptManager>
<script type="text/javascript">
    try {
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);
    } catch (e) {
    }
    function beginRequest(sender, args) {
        $.blockUI({
            message: $("<div>Please wait...loading!!!</div>"),
            overlayCSS: { backgroundColor: '#00FFFF' }
        });
    }
    function endRequest(sender, args) {
        $.unblockUI();
    }
</script>
<asp:UpdatePanel runat="server">
    <ContentTemplate>
        <asp:Button ID="Button1" runat="server" Text="Test with this" /></ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html>

我的方法与另一个答案相似，但我没有使用BlockUI插件。

首先，我在CSS文件中创建了不可见的叠加: 
#page-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10000;
}
然后，我添加了Javascript代码: 
var PageRequestManager = Sys.WebForms.PageRequestManager.getInstance();
function BlockUI(sender, args) {
    jQuery('<div id="page-overlay"> </div>').appendTo(document.body);
}
function UnblockUI(sender, args) {
    jQuery('#page-overlay').remove();
}
PageRequestManager.add_beginRequest(BlockUI);
PageRequestManager.add_endRequest(UnblockUI);

然后，瞧，它成功了!

相关文章：