Dentro del css:
.AlertModalBackground
{
background-color: #FFFFFF;
filter: alpha(opacity=70);
opacity: 0.2;
height: 20%;
widows: 100%;
}
.modalBackground
{
background-color: white;
filter: alpha(opacity=20);
opacity: 0.2;
}
{
background-color: #FFFFFF;
filter: alpha(opacity=70);
opacity: 0.2;
height: 20%;
widows: 100%;
}
.modalBackground
{
background-color: white;
filter: alpha(opacity=20);
opacity: 0.2;
}
<script type="text/javascript" language="javascript">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_endRequest(endRequest);
function initializeRequest(sender, args) {
document.body.style.cursor = "wait";
if (prm.get_isInAsyncPostBack()) {
//debugger
args.set_cancel(true);
}
}
function endRequest(sender, args) {
document.body.style.cursor = "default";
}
//JavaScript code included at jsUpdateProgress.js file
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// shows the Popup
$find(ModalProgress).hide();
}
var ModalProgress = '';
script>
<asp:Panel ID="pnlLoading" runat="server" CssClass="updateProgress">
<asp:UpdateProgress ID="updPrgPnl" runat="server">
<ProgressTemplate>
<div class="AlertModalBackground" runat="server" id="divBackground">
<asp:Panel ID="pnlLoadingImage" CssClass="updPrgPnl" runat="server">
<img src="~/Images/ajax-loader.gif" runat="server" id="loadingImage" alt="Cargando..." />
Cargando...asp:Panel>
div>
ProgressTemplate>
asp:UpdateProgress>
asp:Panel>
<asp:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="pnlLoading"
BackgroundCssClass="modalBackground" PopupControlID="pnlLoading" />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_initializeRequest(initializeRequest);
prm.add_endRequest(endRequest);
function initializeRequest(sender, args) {
document.body.style.cursor = "wait";
if (prm.get_isInAsyncPostBack()) {
//debugger
args.set_cancel(true);
}
}
function endRequest(sender, args) {
document.body.style.cursor = "default";
}
//JavaScript code included at jsUpdateProgress.js file
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(beginReq);
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(endReq);
function beginReq(sender, args) {
// shows the Popup
$find(ModalProgress).show();
}
function endReq(sender, args) {
// shows the Popup
$find(ModalProgress).hide();
}
var ModalProgress = '';
script>
<asp:Panel ID="pnlLoading" runat="server" CssClass="updateProgress">
<asp:UpdateProgress ID="updPrgPnl" runat="server">
<ProgressTemplate>
<div class="AlertModalBackground" runat="server" id="divBackground">
<asp:Panel ID="pnlLoadingImage" CssClass="updPrgPnl" runat="server">
<img src="~/Images/ajax-loader.gif" runat="server" id="loadingImage" alt="Cargando..." />
Cargando...asp:Panel>
div>
ProgressTemplate>
asp:UpdateProgress>
asp:Panel>
<asp:ModalPopupExtender ID="ModalProgress" runat="server" TargetControlID="pnlLoading"
BackgroundCssClass="modalBackground" PopupControlID="pnlLoading" />
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">asp:ToolkitScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server">
Y debajo de esto el resto de la página, los gif animados los podeis encontrar en la pagina ajaxload.info
Con esto ya deberíamos tener la ventanita cargando en la página.
No hay comentarios:
Publicar un comentario