Sunday, 18 December 2011

How To Lock Screen While Processing On Server Side

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>


2 comments:

  1. EASIEST SOLUTION.. ITS WORKED FOR ME

    ReplyDelete
  2. Very easy to implement. thanks

    ReplyDelete