div ou tela modal informando que está processando

Question

tenho uma tela de filtro que carrega uma gridview. então quando for clicado no botão para realizar o filtro, coloquei dentro de um updateprogress uma mensagem dizendo que está processando. 

o que preciso é que apareça uma div ou uma janela (os dois do tipo modal) onde  tenha um updateprogress e tenha a mensagem processando. e enquanto tiver a mensagem de processando o usuário não consegue mexer na tela principal, a mesma ficando com a cor cinza (como se estivesse desabilitada) enquanto processa.

como seria?

Answer 1

Tem um jquery.block que faz todo esse processo pra você.

Só dar uma googleada.

Answer 2

não encontrei nada a respeito onde o block façao o q eu preciso.
ele simplesmente desabilita os controles. preciso que apareça uma mensagem de processando, sendo q o usuário não consiga usar os controles da tela "pai" até que processe.

Answer 3

Baixa um jquery chamado jqModal.

function pageLoad()

{

        //Inicializa o Modal
        var $dvModalLoader = $('#dvModalLoader').jqm({ modal: true, toTop: true, trigger: false });

        //Adiciona os eventos para exibir/ocultar modal enquanto o postback assíncrono é executado.
        Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
        Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

        function beginRequest(sender, args) {
            $dvModalLoader.jqmShow();
        }

        function endRequest(sender, args) {
            $dvModalLoader.jqmHide();
        }

        function cancelPostback() {
            Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
            return false;
        }

}

no html coloque este código.

<asp:UpdateProgress runat="server" ID="UpdateProgress1">
    <ProgressTemplate>
        <div id="dvAjaxLoader" class="AjaxLoader">
            <div id="Title">
                <h3>
                    Processando Informações</h3>
            </div>
            <div id="Gif">
            </div>
            <div style="width: 100%; text-align: center; margin-top: 8px;">
                <asp:Button ID="Button1" runat="server" Text="Cancelar" OnClientClick="javascript:cancelPostback();" />
            </div>
        </div>
    </ProgressTemplate>
</asp:UpdateProgress>
<div id="dvModalLoader" style="width: 0px; height: 0px; left: -8000px;" class="jqmWindow">
</div>

Isso fará o que vc precisa.

Answer 4

cara você poderia por favor, postar o código do jqModal? Aqui na empresa não é possível fazer download de nada.

Obrigado.

Answer 5

consegui baixar o jqModal.js e jqModal.css

cara tenho uma combo na tela q quando seleciono um valor aparece outra combo. só que está aparecendo a mensagem processando informações. deveria ser somente quando eu clicar no meu botão de pesquisa. veja

<link href="../CSS/jqModal.css" rel="stylesheet" type="text/css" /> 
<script src="../JS/jqModal.js" type="text/javascript"></script>

<script>
  function pageLoad() {

            //Inicializa o Modal
            var $dvModalLoader = $('#dvModalLoader').jqm({ modal: true, toTop: true, trigger: false });

            //Adiciona os eventos para exibir/ocultar modal enquanto o postback assíncrono é executado.
            Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginRequest);
            Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endRequest);

            function beginRequest(sender, args) {
                $dvModalLoader.jqmShow();
            }

            function endRequest(sender, args) {
                $dvModalLoader.jqmHide();
            }

            function cancelPostback() {
                Sys.WebForms.PageRequestManager.getInstance().abortPostBack();
                return false;
            }

        }
</script>

    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <asp:UpdateProgress runat="server" ID="UpdateProgress1">
            <ProgressTemplate>
                <div id="dvAjaxLoader" class="AjaxLoader">
                    <div id="Title">
                        <h3>
                            Processando Informações</h3>
                    </div>
                    <div id="Gif">
                    </div>
                    <div style="width: 100%; text-align: center; margin-top: 8px;">
                        <asp:Button ID="Button1" runat="server" Text="Cancelar" OnClientClick="javascript:cancelPostback();" />
                    </div>
                </div>
            </ProgressTemplate>
        </asp:UpdateProgress>
        <div id="dvModalLoader" style="width: 0px; height: 0px; left: -8000px;" class="jqmWindow">
        </div>

 <asp:Panel ID="pnl1" runat="server">
            <table bgcolor="#A5BEE7" style="width: 75%">
                <tr>
                    <td class="style10" style="background-position: left top; background-image: url('../Imagens/coolite.gif')" >
                        <table style="width:100%;" cellpadding="2" cellspacing="2">
                            <tr>
                                <td class="style13">
                                    <table class="lbl">
                                        <tr>
                                            <td class="style4">
                                                <asp:Label ID="lblIndexador" runat="server" Text="Indexador:"></asp:Label></td>
                                            <td class="style9">
                                                <asp:DropDownList ID="cmbIndexador" AutoPostBack="true" runat="server"
                                                    Width="350px" >
                                                </asp:DropDownList>
                                            </td>
                                        </tr>
                                        <tr>
                                            <td class="style4">
                                                <asp:Label ID="lblGrupoProduto" runat="server" Text="Grupo Produto:"></asp:Label></td>
                                            <td class="style9">
                                                <asp:DropDownList ID="cmbGrupoProduto" AutoPostBack="true" runat="server"
                                                    Width="350px">
                                                </asp:DropDownList>
                                            </td>
                                        </tr>
   </table>
  </table>
 <asp:Panel>

  </ContentTemplate>
    </asp:UpdatePanel>

o q está errado?

Answer 6

Então, se você observar, todo postback da pagina ele vai ser executado.