jQuery超简单遮罩层实现方法示例


Posted in jQuery onSeptember 06, 2018

本文实例讲述了jQuery超简单遮罩层实现方法。分享给大家供大家参考,具体如下:

在开发中,为了避免二次提交,遮罩层的运用越来越普遍

看了很多代码,下面跟大家分享一下我认为最简单的遮罩层实现方式:

1.样式如下设置:

CSS代码:

<style type="text/css">
  .mask {
      position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
      z-index: 1002; left: 0px;
      opacity:0.5; -moz-opacity:0.5;
      display:none;
    }
</style>

其中: opacity:0.5;适用于IE, -moz-opacit:0.5;适用于火狐;你只需要都加上,便可以火狐和IE下都可以使用。

2.指定层的高度、和宽度。

js代码

<script type="text/javascript">
  //兼容火狐、IE8
  //显示遮罩层
  function showMask(){
    $("#mask").css("height",$(document).height());
    $("#mask").css("width",$(document).width());
    $("#mask").show();
  }
  //隐藏遮罩层
  function hideMask(){
    $("#mask").hide();
  }
</script>

3.在<body>中加入如下代码,然后就可以看效果了:

html代码

<div id="mask" class="mask"></div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="showMask()" >点我显示遮罩层</a><br />

4.使用方法:

在ajax提交表单后,加上showMask方法,数据返回后,加上hideMask()

需要的亲们可以根据自己需求,在遮罩层上面加一些提示信息

可以使用在线HTML/CSS/JavaScript前端代码调试运行工具http://tools.3water.com/code/WebCodeRun测试运行上述代码效果(不要忘记加入jQuery.js文件)。

或者可以使用在线HTML/CSS/JavaScript代码运行工具http://tools.3water.com/code/HtmlJsRun测试运行如下完整代码(为方便测试效果,代码做了部分改进):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>3water.com jQuery遮罩层</title>
<style type="text/css">
  .mask {
      position: absolute; top: 0px; filter: alpha(opacity=60); background-color: #777;
      z-index: 1; left: 0px;
      opacity:0.5; -moz-opacity:0.5;
      display:none;
    }
  .msg {
    width: 300px;
    height: 200px;
    color: #3c763d;
    background-color: #dff0d8;
    border-radius: 4px;
    padding: 15px;
    position: absolute;
    top: 0;
    text-align: center;
    margin: 0 auto;
    z-index: 999;
    left: 50%;
    margin-left: -150px;
    display:none;
    }
</style>
</head>
<body>
<div id="mask" class="mask" onclick="hideMask()"></div>
<div align="center" class="msg">提示信息</div>
<a href="javascript:;" rel="external nofollow" rel="external nofollow" onclick="showMask()" >点我显示遮罩层</a><br />
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">
  //兼容火狐、IE8
  //显示遮罩层
  function showMask(){
    $("#mask").css("height",$(document).height());
    $("#mask").css("width",$(document).width());
    $("#mask").show();
    $(".msg").show();
  }
  //隐藏遮罩层
  function hideMask(){
    $("#mask").hide();
    $(".msg").hide();
  }
</script>
</body>
</html>

希望本文所述对大家jQuery程序设计有所帮助。

jQuery 相关文章推荐
jQuery制作input提示内容(兼容IE8以上)
Jul 05 jQuery
Django中使用jquery的ajax进行数据交互的实例代码
Oct 15 jQuery
JQuery选中select组件被选中的值方法
Mar 08 jQuery
jQuery实现的页面详情展开收起功能示例
Jun 11 jQuery
jQuery动态操作表单示例【基于table表格】
Dec 06 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery Datatables 动态列+跨列合并实现代码
Jan 30 jQuery
jQuery实现鼠标拖拽登录框移动效果
Sep 13 jQuery
jQuery实现查看图片功能
Dec 01 jQuery
jquery插件实现图片悬浮
Apr 16 jQuery
详解jQuery的核心函数和事件处理
Feb 18 jQuery
jQuery实现鼠标移入移出事件切换功能示例
Sep 06 #jQuery
jQuery实现动画、消失、显现、渐出、渐入效果示例
Sep 06 #jQuery
jQuery实现基本动画效果的方法详解
Sep 06 #jQuery
jQuery滑动效果实现方法分析
Sep 05 #jQuery
jquery判断滚动条距离顶部的距离方法
Sep 05 #jQuery
jQuery实现基本淡入淡出效果的方法详解
Sep 05 #jQuery
jquery获取元素到屏幕四周可视距离的方法
Sep 05 #jQuery
You might like
php+mysql分页代码详解
2008/03/27 PHP
php下网站防IP攻击代码,超级实用
2010/10/24 PHP
PHP连接sql server 2005环境配置及问题解决
2014/08/08 PHP
PHP实现求连续子数组最大和问题2种解决方法
2017/12/26 PHP
PHP PDOStatement::bindColumn讲解
2019/01/30 PHP
用JavaScript实现仿Windows关机效果
2007/03/10 Javascript
javascript两段代码,两个小技巧
2010/02/04 Javascript
jquery选择checked在ie8普通模式下的问题
2014/02/12 Javascript
jQuery获取页面及个元素高度、宽度的总结——超实用
2015/07/28 Javascript
jQuery绑定事件监听bind和移除事件监听unbind用法实例详解
2016/01/19 Javascript
Bootstrap优化站点资源、响应式图片、传送带使用详解3
2016/10/14 Javascript
javascript ES6中箭头函数注意细节小结
2017/02/17 Javascript
jQuery实现三级联动效果
2017/03/02 Javascript
NodeJs项目中关闭ESLint的方法
2018/08/09 NodeJs
jQuery+ajax实现批量删除功能完整示例
2019/06/06 jQuery
layui checkbox默认选中,获取选中值,清空所有选中项的例子
2019/09/02 Javascript
js实现随机点名程序
2020/09/17 Javascript
原生JavaScript实现刮刮乐
2020/09/29 Javascript
线程和进程的区别及Python代码实例
2015/02/04 Python
使用Python读写及压缩和解压缩文件的示例
2016/07/08 Python
python中实现迭代器(iterator)的方法示例
2017/01/19 Python
Python简单生成随机数的方法示例
2018/03/31 Python
Python中pip更新和三方插件安装说明
2018/07/08 Python
Python实现对文件进行单词划分并去重排序操作示例
2018/07/10 Python
python 不同方式读取文件速度不同的实例
2018/11/09 Python
PyQt5+Pycharm安装和配置图文教程详解
2020/03/24 Python
详解WebSocket跨域问题解决
2018/08/06 HTML / CSS
有机童装:Toby Tiger
2018/05/23 全球购物
美国最大的电子宠物训练产品制造商:PetSafe
2018/10/12 全球购物
C语言编程题
2015/03/09 面试题
Linux常见面试题
2013/03/18 面试题
十周年庆典策划方案
2014/06/03 职场文书
客房服务员岗位职责
2015/02/09 职场文书
暂住证证明
2015/06/19 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
Nginx代理同域名前后端分离项目的完整步骤
2021/03/31 Servers