Showing Progress Status In asp.net
Showing Progress Status In asp.net
Step 1: Design web page .aspx page
<head runat="server">
<title></title>
<style type="text/css">
.ShowModal
{
top: 200px;
left: 350px;
z-index: 10500000;
position: absolute;
background-color: White;
display: block;
}
.HideModal
{
display: none;
}
.OverlayEffect
{
background-color: gray;
filter: alpha(opacity=90);
opacity: 0.7;
width:100%;
height:100%;
z-index:10500000;
position: absolute;
top: 0;
left: 0;
}
</style>
<script type="text/javascript">
function DisplayModal() {
document.getElementById("overlay").style.height
= '500%';
document.getElementById("overlay").className
= "OverlayEffect";
document.getElementById("modalMsg").className
= "ShowModal";
}
function RemoveModal() {
document.getElementById("modalMsg").className
= "HideModal";
document.getElementById("overlay").className
= "";
return false;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="overlay" style="height:500%; width:400%;"> </div>
<div id="modalMsg" style="width: 100px; height: 100px; border-color: Black; border-style: solid; z-index:10500000;
color: Red;" class="HideModal">
<img src="Processing.gif" />
</div>
<asp:Button ID="btn_progress" runat="server" Text="Show Progress" OnClientClick="return DisplayModal();" />
</form>
</body>
Step 2:Logic on .Cs page
protected void btnSubmit_Click(object sender, EventArgs e)
{
System.Threading.Thread.Sleep(5000);
}
It will look like :-
Comments
Post a Comment