zoukankan      html  css  js  c++  java
  • 遮罩

    为了防止上传文件的过程中用户的其他操作,可以利用简单的div遮罩锁住页面,当后台处理完上传操作之后自动转到其他页面。

    #遮罩层的CSS样式

    <style type="text/css">
    *{padding:0;margin:0}
    .pop1{z-index:1;background-color:#CCCCCC;opacity:0.5;100%;height:100%;position:absolute;left:0px;top:0px;display:none}
    .pop2{z-index:2;background-color:white;position:absolute;left:40%;top:40%;300px;height:100px;display:none}
    </style> 
    '''注:透明效果'''
       opacity:0.5 其透明度在0-1间取值 0为全透明 ,只适用于Firefox 3.5之后的版本
       -moz-opacity:.5;  透明值 ,0--1 之间,适用于Firefox 3.5之前的版本
       filter: Alpha(opacity=50); 其透明度在0-100间取值 0为全透明 只使用于IE
       如果需要全部兼容,那就都写上就OK了
    

    #开启遮罩事件

     <script type="text/javascript"> 
    function show(o1,o2)
    { var o1 = document.getElementById(o1); 
    var o2 = document.getElementById(o2); 
    o1.style.width = document.documentElement.scrollWidth; 
    o1.style.height = document.documentElement.scrollHeight; 
    o1.style.display = "block"; 
    o2.style.display = "block"; } 
    </script> ^M
    
    

    #页面

    <body id="" style="100%;height:100%" onload="lod()">
    <div id="pop1" class="pop1"> </div>
    <div id="pop2" class="pop2" ><br><br><h2>文件正在上传........</h2> </div>
    ......
    <input type="file" id="my_file" name="my_file"  value=""/>
    .......
    <button type="submit" onclick="show('pop1' ,'pop2')" class="switch_bn">上传</button>
    .......
    </body>
    

    注:

    这样的上传效果只是伪上传进度,如果在django框架下实现实时显示真正的上传进度,可参考:

     http://djangosnippets.org/snippets/679/  http://djangosnippets.org/snippets/678/

  • 相关阅读:
    LeetCode-Cycle Detection,Find the Duplicate Number
    LeetCode-Symmetric Tree
    剑指offer-打印链表倒数第k个结点
    Http协议中Get和Post的区别
    ORDER BY 语句
    AND 和 OR 运算符
    WHERE 子句
    SQL SELECT DISTINCT 语句
    SQL SELECT 语句
    SQL DML 和 DDL
  • 原文地址:https://www.cnblogs.com/codinggirl/p/2995381.html
Copyright © 2011-2022 走看看