1. (function () {
  2. //遮罩层实现 zhe zhao ceng kexb 2016.2.24
  3. $.extend($.fn, {
  4. mask: function (msg, maskDivClass) {
  5. this.unmask();
  6. // 参数
  7. var op = {
  8. opacity: 0.8,
  9. z: ,
  10. bgcolor: '#ccc'
  11. };
  12. var original = $(document.body);
  13. var position = { top: , left: };
  14. if (this[] && this[] !== window.document) {
  15. original = this;
  16. position = original.position();
  17. }
  18. // 创建一个 Mask 层,追加到对象中
  19. var maskDiv = $('<div class="maskdivgen">&nbsp;</div>');
  20. maskDiv.appendTo(original);
  21. var maskWidth = original.outerWidth();
  22. if (!maskWidth) {
  23. maskWidth = original.width();
  24. }
  25. var maskHeight = original.outerHeight();
  26. if (!maskHeight) {
  27. maskHeight = original.height();
  28. }
  29. maskDiv.css({
  30. position: 'absolute',
  31. top: position.top,
  32. left: position.left,
  33. 'z-index': op.z,
  34. width: "100%",//maskWidth,
  35. height:"30%", //maskHeight,
  36. 'background-color': op.bgcolor,
  37. opacity:
  38. });
  39. if (maskDivClass) {
  40. maskDiv.addClass(maskDivClass);
  41. }
  42. if (msg) {
  43. var msgDiv = $('<div style="position:absolute;border:#6593cf 1px solid; padding:2px;background:#ccca"><div style="line-height:24px;border:#a3bad9 1px solid;background:white;padding:2px 10px 2px 10px">' + msg + '</div></div>');
  44. msgDiv.appendTo(maskDiv);
  45. var widthspace = (maskDiv.width() - msgDiv.width());
  46. var heightspace = (maskDiv.height() - msgDiv.height());
  47. msgDiv.css({
  48. cursor: 'wait',
  49. top: (heightspace / - ),
  50. left: (widthspace / - )
  51. });
  52. }
  53. maskDiv.fadeIn('fast', function () {
  54. // 淡入淡出效果
  55. $(this).fadeTo('slow', op.opacity);
  56. })
  57. return maskDiv;
  58. },
  59. unmask: function () {
  60. var original = $(document.body);
  61. if (this[] && this[] !== window.document) {
  62. original = $(this[]);
  63. }
  64. original.find("> div.maskdivgen").fadeOut('slow', , function () {
  65. $(this).remove();
  66. });
  67. }
  68. });
  69. })();

jquery遮罩层的更多相关文章

  1. jQuery遮罩层登录对话框

    用户登录是许多网站必备的功能.有一种方式就是不管在网站的哪个页面,点击登录按钮就会弹出一个遮罩层,显示用户登录的对话框.这用方式比较灵活方便.而现在扫描二维码登录的方式也是很常见,例如QQ.微信.百度 ...

  2. jQuery遮罩层的实现

    遮罩层其实就是一个占据整个页面的半透明效果的页面元素,一般用div实现.页面中实现遮罩层,无非就是为了让用户只能操作弹出窗口的内容,而不允许操作弹出窗口外的内容. 在实现时,我使用了两个div,一个遮 ...

  3. jQuery遮罩层插件

    在网页上常常遇到须要等待非常久的操作,比方导出报表等.为了预防用户点击其它操作或者多次点击同个功能,须要用遮罩层把页面或者操作区盖住.防止用户进行下一步操作.同一时候能够提高界面友好度,让用户知道操作 ...

  4. jquery 遮罩层显示img

    如果点击iframe中的image显示整个页面的遮罩层,可参考如下: http://blog.csdn.net/shiaijuan1/article/details/70160714 具体思路就是,顶 ...

  5. jQuery遮罩层效果

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  6. JQuery 遮罩层弹窗

    var str = "<div id=\"zhezhao\" style=\"display:none; background-color: rgba(0 ...

  7. jquery 遮罩层指定位置

    .css .datagrid-mask-msg { position: absolute; top: %; margin-top: -20px; padding: 12px 5px 10px 30px ...

  8. Jquery实现遮罩层,就是弹出DIV周围都灰色不能操作

    <%@ page language="java" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC & ...

  9. jquery实现div遮罩层

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

随机推荐

  1. 剑指offer-第四章解决面试题的思路(从上往下打印二叉树)

    题目:从上往下打印二叉树的每一个节点,同一层的节点按照从左到右的顺序打印 思路:这是一个层序遍历的问题,因此要借用到队列.我们可以在打印第一个节点的同时将这个节点的左右子节点都放入队列,同样打印左右子 ...

  2. 关于ip层的作用网址链接

    http://rabbit.xttc.edu.cn/rabbit/htm/artical/201091113054.shtml

  3. jenkins 重置密码

      说明 最近在折腾jenkins,配置用户权限时点错了,选择了安全矩阵后没有添加用户,就保存配置了,然后就报错了,提示没有Overall/Read权限.还有另外一个问题,用户的密码忘记了怎么办? 一 ...

  4. 第14篇 PSR-3规范(日志)

    1. Specification 1.1 Basics The LoggerInterface exposes eight methods to write logs to the eight RFC ...

  5. RHEL6.2配置从零开始

    RHEL6.2最小化安装并配置,持续更新中... 1.RHEL6.2最小化安装 RHEL6.2默认安装许多用不到的软件,不仅浪费空间.增大系统开销,还会显得凌乱.所以选择最小化安装.  注意:安装步骤 ...

  6. 求分数1+1/2+1/3+.....+1/n的值

    总结:自己理解错了的有以下几点: 1.s初始化的值是0.但数据类型最好定位double双精度类型 2.for循环里面的i<n.不要忘了等号,因为i作为分母,不能为0,所以从1开始, 3.在mai ...

  7. 分布式锁之二:zookeeper分布式锁2

    示例: package com.util; import org.slf4j.Logger; import org.slf4j.LoggerFactory; import org.apache.zoo ...

  8. mysql安装与基本管理

    一.MySQL介绍 MySQL是一个关系型数据库管理系统,由瑞典MySQL AB 公司开发,目前属于 Oracle 旗下公司.MySQL 最流行的关系型数据库管理系统,在 WEB 应用方面MySQL是 ...

  9. PHP开发环境正确的错误信息处理

    正确记录配置 php.ini display_errors = On error_reporting = E_ALL log_errors = On error_log = F:/data/php/e ...

  10. Delphi PDF

    llPDFLib,TPDFDocument 2016开始开源. procedure TForm2.Button1Click(Sender: TObject); var lPdf : TPdfDocum ...