<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>
.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>
<asp:Button ID="btn1" runat="server" Text="sample" onclick="btn1_Click" />
<div style='width:680px; height:332px; margin-left:80px; overflow:auto; margin-top:5px;'>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" Width="627px">
</dx:ASPxGridView>
<asp:Button ID="btnsample" runat="server" Text="Load Grid"
onclick="btnsample_Click" />
</div>
</div>
<div>
<%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>--%>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="Images/preload.gif" alt="" />
</div>
load the data in button click event
and also we can do this same as in dropdown selection also for dropdown call the javascript function on dropdown onchange event
<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>
{
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>
<asp:Button ID="btn1" runat="server" Text="sample" onclick="btn1_Click" />
<div style='width:680px; height:332px; margin-left:80px; overflow:auto; margin-top:5px;'>
<dx:ASPxGridView ID="ASPxGridView1" runat="server" Width="627px">
</dx:ASPxGridView>
<asp:Button ID="btnsample" runat="server" Text="Load Grid"
onclick="btnsample_Click" />
</div>
</div>
<div>
<%-- <asp:UpdatePanel ID="UpdatePanel1" runat="server">
<ContentTemplate>--%>
<div class="loading" align="center">
Loading. Please wait.<br />
<br />
<img src="Images/preload.gif" alt="" />
</div>
load the data in button click event
and also we can do this same as in dropdown selection also for dropdown call the javascript function on dropdown onchange event
Hi, this is very nice, but I tested on IE and doesn't work. on FF work's fine,
ReplyDeleteHow can I modify this to work well with IE?
thks...