miércoles, 28 de agosto de 2013

Preloader on Postback

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;" />

No hay comentarios:

Publicar un comentario