Their Is Two things To Be Noted ..
1. CSS
2. Javascript
In CSS(Cascade Style Sheet) Their is not Much Popular Attribute which is z-index It is used to Make any Html Element On the Top Of All Html Element Which Is Decide On the Basis Of Its Value element having higher value of z-index is show
Now How To Lock screen On submit Button Click..
Style Sheet
<style type="text/css">
.LockOff
{
display: none;
visibility: hidden;
}
.LockOn
{
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color: #fff;
text-align: center;
padding-top: 20%;
filter: alpha(opacity=100);
opacity: 0.80;
}
</style>
<script type="text/jscript">
function skm_LockScreen() {
var lock = document.getElementById('skm_LockPane');
if (lock)
lock.className = 'LockOn';
}
</scrip>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" OnClientClick="javascript:skm_LockScreen()" />
<div id="skm_LockPane" class="LockOff">
<img alt="Processing " height="60px" width="60px" src="Images/progress.gif" />
</div>
1. CSS
2. Javascript
In CSS(Cascade Style Sheet) Their is not Much Popular Attribute which is z-index It is used to Make any Html Element On the Top Of All Html Element Which Is Decide On the Basis Of Its Value element having higher value of z-index is show
Now How To Lock screen On submit Button Click..
Style Sheet
<style type="text/css">
.LockOff
{
display: none;
visibility: hidden;
}
.LockOn
{
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 105%;
height: 105%;
background-color: #fff;
text-align: center;
padding-top: 20%;
filter: alpha(opacity=100);
opacity: 0.80;
}
</style>
<script type="text/jscript">
function skm_LockScreen() {
var lock = document.getElementById('skm_LockPane');
if (lock)
lock.className = 'LockOn';
}
</scrip>
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" OnClientClick="javascript:skm_LockScreen()" />
<div id="skm_LockPane" class="LockOff">
<img alt="Processing " height="60px" width="60px" src="Images/progress.gif" />
</div>
EASIEST SOLUTION.. ITS WORKED FOR ME
ReplyDeleteVery easy to implement. thanks
ReplyDelete