Loading div modal

<< Click to Display Table of Contents >>

Navigation:  ASP.NET > Dicas avançadas >

Loading div modal

Previous pageReturn to chapter overviewNext page

Tela

 

loading1

 

Ao pressionar o botão:

 

loading2

 

aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm1.aspx.cs" Inherits="WebApplication1.WebForm1" %>

 

<!DOCTYPE html>

 

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

    <title></title>

    <style>

        .modal

        {

            positionfixed;

            top0;

            left0;

            background-colorblack;

            z-index99;

            opacity0.3;

            filteralpha(opacity=30);

            -moz-opacity0.3;

            min-height100%;

            width100%;

        }

 

        .loading

        {

            text-aligncenter;

            font-familyArial;

            font-size10pt;

            border2px solid #67CFF5;

            width200px;

            height50px;

            displaynone;

            positionfixed;

            background-colorWhite;

            z-index999;

        }

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

 

</head>

<body>

    <form id="form1" runat="server">

        <div>

            <asp:Button ID="btProcessar" runat="server" OnClick="btProcessar_Click" Text="Processar..." />

            <br />

 

            <asp:Label ID="lbResult" runat="server" Text="Pressione o botão para processar"></asp:Label>

 

            <div class="loading">

                Carregando. Por favor aguarde...<br />

                <br />

                <img src="loading.gif" alt="" />

            </div>

        </div>

    </form>

</body>

</html>

 

cs

 

using System;

 

namespace WebApplication1

{

    public partial class WebForm1 : System.Web.UI.Page

    {

        protected void Page_Load(object sender, EventArgs e)

        {

            if (!IsPostBack)

            {

                string script = "$(document).ready(function () { $('[id*=btProcessar]').click(); });";

                ClientScript.RegisterStartupScript(this.GetType(), "load", script, true);

            }

        }

 

        protected void btProcessar_Click(object sender, EventArgs e)

        {

            System.Threading.Thread.Sleep(5000);

            lbResult.Text = "Processado às " + DateTime.Now.ToString("hh:mm:ss");

        }

    }

}