zoukankan      html  css  js  c++  java
  • 进度条锁屏效果

    我们在项目中导入xls文件的时候,文件大时,点击上传导入,半天没有反应,然后又多次点击,导致程序出现问题。

    我们需要在点击上传的时候,锁定屏幕,给出一个动态gif图片效果图,提示后台程序正在处理的简单进度条效果。

    <html>  
        <head>  
            <title></title>  
            <meta http-equiv="content-Type" content="text/html;charset=gb2312">  
            <!-- 把下面代码加到<head>与</head>之间-->  
            <style type="text/css">  
                .black_overlay {   
                    display: none;   
                    position: absolute;   
                    top: 0%;   
                    left: 0%;   
                    width: 100%;   
                    height: 100%;   
                    background-color: black;   
                    z-index: 1001;   
                    -moz-opacity: 0.8;   
                    opacity: .80;   
                    filter: alpha(opacity = 80);   
                }   
                   
                .white_content {   
                    display: none;   
                    position: absolute;   
                    top: 25%;   
                    left: 25%;   
                    width: 50%;   
                    height: 50%;   
                    padding: 16px;   
                    /**   
                    border: 16px solid orange;   
                    **/   
                    background-color: white;   
                    z-index: 1002;   
                    overflow: auto;   
                }   
            </style>  
        </head>  
        <body>  
                <input type="button" value="调用" onclick="javascript:alert('123123123');" >
            <!--把下面代码加到<body> 与</body>之间-->  
            <input type="button" value="启动" onclick="document.getElementById('light').style.display='block'; document.getElementById('fade').style.display='block'">  
            
            <div id="light" class="white_content">  
                <!--<input type="button" value="关闭" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'"></a>  -->
                <img src="jdt.gif" /><br/>
                <h1>正在处理中,请稍等!!!</h1>
            </div>  
            
            <div id="fade" class="black_overlay">  
            </div>  
        </body>  
    </html>  

    效果图如下: 正在处理中,请稍等!!!

  • 相关阅读:
    版本控制器 git
    JS 严格模式
    backquote
    linux内存监控 free
    好的linux网站
    linux查看进程开始时间
    命令之 ulimit
    using JSTL
    javax.servlet.jsp.PageContext cannot be resolved to a type
    jstl c
  • 原文地址:https://www.cnblogs.com/simpledev/p/3668067.html
Copyright © 2011-2022 走看看