1)
Styles
<style type=
"text/css">
.LockOn {
display: block;
visibility: visible;
position: absolute;
z-index: 999;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
background-color: #fff;
text-align: center;
padding-top: 20%;
filter: alpha(opacity=75);
opacity: 0.75;
}
.
PrProgress{
width:300px;
margin:0 auto;
}
.
PrContainer{
border: solid 1px #808080;
border-width: 1px 0px;
}
.
PrHeader{
background: url(../img/sprite.png) repeat-x 0px 0px;
border-color: #808080 #808080 #ccc;
border-style: solid;
border-width: 0px 1px 1px;
padding: 0px 10px;
color: #000000;
font-size: 9pt;
font-weight: bold;
line-height: 1.9;
white-space:nowrap;
font-family: arial,helvetica,clean,sans-serif;
}
.
PrBody{
background-color: #f2f2f2;
border-color: #808080;
border-style: solid;
border-width: 0px 1px;
padding: 10px;
}
</style>
2)
Javascript
<
script type=
"text/javascript">
function skm_LockScreen() {
var lock = document.getElementById('skm_LockPane');
if (lock)
lock.className = 'LockOn';
}
</script>
3)
Div
<
div id="
skm_LockPane"
class="
LockOff">
<
div class="
PrProgress">
<
div id="
innerPopup"
class="
PrContainer">
<
div class="
PrHeader">
Loading...
</
div>
<
div class="
PrBody">
<
img src="
../images/preloader.gif" alt="Loading..." />
</
div>
</
div>
</
div>
</
div>
4)
Button
ID="btnSearch" runat="server" Text="Search" OnClick="BtnSearch_Click" OnClientClick="skm_LockScreen(); return true;" />