頁面加載時凍結後臺頁面

我希望如果我的文本框爲空，則字段驗證程序會顯示錯誤消息，如果文本框不爲空，那麼在加載按鈕時單擊該頁面時會凍結頁面。頁面加載時凍結後臺頁面

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#

來源

2014-03-26 user3464847

你可以嘗試的jQuery BlockUI

頁阻擋functionallity我用它與ASP相結合。淨的UpdatePanel，所以我可以阻止每個回發的用戶界面。

<!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>

來源

2014-03-26 22:01:14

我的方法與其他答案類似，但我沒有使用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);

而且，瞧，它的工作！

來源

2017-03-09 14:01:55

頁面加載時凍結後臺頁面

回答

相關問題