페이지로드 중 배경 페이지 고정

내 텍스트 상자가 비어 있으면 필드 유효성 검사기에 오류 메시지가 표시되고 텍스트 상자가 비어 있지 않은 경우 버튼 클릭시로드되는 동안 페이지가 고정되기를 원합니다.페이지로드 중 배경 페이지 고정

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>

내가 비주얼 스튜디오 2010 ASP.Net/C#이

출처

2014-03-26 user3464847

당신은 내가가 ASP와 함께 사용 jQuery BlockUI

의 페이지 차단 functionallity을 시도해 볼 수도 사용하고 있습니다. 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>

출처

2014-03-26 22:01:14

내 접근 방식은 다른 대답과 비슷하지만 BlockUI 플러그인을 사용하지 않았습니다.

먼저 내가 CSS 파일에 보이지 않는 오버레이를 만들어 : 다음

#page-overlay { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10000; 
}

, 나는 자바 스크립트 코드 추가 : 봐라

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

페이지로드 중 배경 페이지 고정

답변

관련 문제