zoukankan      html  css  js  c++  java
  • 一个简单实现的遮罩层

     1 /**
     2  * mask - 遮罩
     3  *
     4  *
     5  * Requires:
     6  * 依赖:
     7  *      jquery.js
     8  *
     9  * How to use:
    10  * 使用方法:
    11  *      $.showMask(msg);
    12  *      $.hideMask();
    13  *      
    14 css样式:
    15 
    16 #ui-mask {
    17   background-color: #ccc;
    18   position: absolute;
    19   z-index: 9999;
    20   left: 0;
    21   top: 0;
    22   display: none;
    23    100%;
    24   height: 100%;
    25   opacity: 0.2;
    26   filter: alpha(opacity=20);
    27   -moz-opacity: 0.2;
    28 }
    29 
    30 #ui-mask-div {
    31     font-size: 14px;;
    32     font-family: Verdana, 微软雅黑, 新宋体, Tahoma;
    33     z-index: 99999;
    34     position: fixed;
    35     padding: 10px 5px 10px 30px;
    36     border-color: #D4D4D4;
    37     top: 50%;
    38     auto;
    39     border- 2px;
    40     border-style: solid;
    41     background: #ffffff url('../loading.gif') no-repeat scroll 5px center;
    42 }
    43  *      
    44  *      
    45  */
    46 (function($) {
    47 
    48     $.fn.showMask = function(msg) {
    49         return $.showMask(msg);
    50     }
    51     
    52     $.fn.hideMask = function() {
    53         this.hideMask();
    54     }
    55 
    56     $.showMask = function(msg) {
    57         $("html").append('<div id="ui-mask"></div><div id="ui-mask-div">' + msg + '</div>');
    58         _this_ = $("#ui-mask");
    59         _this_.height($(document).height());
    60         this.adjust();
    61         _this_.css('display', 'block');
    62     };
    63 
    64     $.hideMask = function() {
    65         $("#ui-mask").remove();
    66         $("#ui-mask-div").remove();
    67     };
    68 
    69     $.adjust = function() {
    70         var w = $("#ui-mask").width();
    71         var div = $("#ui-mask-div").css('width').replace('px', '');
    72         
    73         var l = (w - div )/ 2;
    74         if (l < 0)
    75             l = 0;
    76         
    77         $("#ui-mask-div").css({
    78             left : l + 'px'
    79         });
    80     }
    81 
    82 })(jQuery);
  • 相关阅读:
    jQuery 文本框得失焦点应用
    .NET 学习书籍推荐
    Android开发常见问题小结
    如何使用别人项目源码
    Android相关学习资料整理
    Android网络文件下载模块整理
    父类方法扩展
    继承后构造函数的关系
    私有属性和私有方法l
    面向对象
  • 原文地址:https://www.cnblogs.com/jadening/p/5687382.html
Copyright © 2011-2022 走看看