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 EasyUI 表单组件增加焦点切换功能的方法
Apr 13 jQuery
基于jQuery实现文字打印动态效果
Apr 21 jQuery
Jquery EasyUI $.Parser
Jun 02 jQuery
jquery处理checkbox(复选框)是否被选中实例代码
Jun 12 jQuery
如何将 jQuery 从你的 Bootstrap 项目中移除(取而代之使用Vue.js)
Jul 17 jQuery
jQuery实现用户信息表格的添加和删除功能
Sep 12 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
详解jQuery获取特殊属性的值以及设置内容
Nov 14 jQuery
JQuery事件委托原理与用法实例分析
May 13 jQuery
JQuery中DOM节点的操作与访问方法实例分析
Dec 23 jQuery
jQuery实现的解析本地 XML 文档操作示例
Apr 30 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
详解WordPress中过滤链接与过滤SQL语句的方法
2015/12/18 PHP
swoole_process实现进程池的方法示例
2018/10/29 PHP
Ajax+PHP实现的分类列表框功能示例
2019/02/11 PHP
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
Node.js中的process.nextTick使用实例
2015/06/25 Javascript
jQuery实现花式轮播之圣诞节礼物传送效果
2016/12/25 Javascript
bootstrap——bootstrapTable实现隐藏列的示例
2017/01/14 Javascript
JavaScript、C# URL编码、解码总结
2017/01/21 Javascript
jQuery插件FusionCharts绘制ScrollColumn2D图效果示例【附demo源码下载】
2017/03/22 jQuery
JavaScript设计模式之装饰者模式实例详解
2019/01/17 Javascript
从0到1学习JavaScript编写贪吃蛇游戏
2020/07/28 Javascript
[02:06]DOTA2肉山黑名单魔法终结者 敌法师中文配音鉴赏
2013/06/17 DOTA
在Python中调用ggplot的三种方法
2015/04/08 Python
Python基于递归算法实现的走迷宫问题
2017/08/04 Python
flask框架自定义过滤器示例【markdown文件读取和展示功能】
2019/11/08 Python
Pytorch训练过程出现nan的解决方式
2020/01/02 Python
CSS3 圆角效果
2009/07/15 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
英国在线购买轮胎、预订汽车、汽车维修和装配网站:Protyre
2020/04/12 全球购物
惠而浦美国官网:Whirlpool.com
2021/01/19 全球购物
PHP经典面试题
2016/09/03 面试题
介绍一下SQL Server里面的索引视图
2016/07/31 面试题
中餐厅主管的职责范文
2014/02/04 职场文书
高一化学教学反思
2014/02/05 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
股权转让协议范本
2014/12/07 职场文书
离职感谢信
2015/01/21 职场文书
财政局长个人总结
2015/03/04 职场文书
工程部岗位职责范本
2015/04/11 职场文书
HTML中的表单Form实现居中效果
2021/05/25 HTML / CSS
Go语言基础函数基本用法及示例详解
2021/11/17 Golang
使用 Apache 反向代理的设置技巧
2022/01/18 Servers
java实现自定义时钟并实现走时功能
2022/06/21 Java/Android
GPU服务器的多用户配置方法
2022/07/07 Servers