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插件FusionCharts实现的Marimekko图效果示例【附demo源码】
Mar 24 jQuery
jquery submit()不能提交表单的解决方法
Apr 24 jQuery
jquery append与appendTo方法比较
May 24 jQuery
jQuery实现动态添加节点与遍历节点功能示例
Nov 09 jQuery
jQuery.Sumoselect插件实现下拉复选框效果
Nov 09 jQuery
jQuery实现碰到边缘反弹的动画效果
Feb 24 jQuery
轻松搞定jQuery+JSONP跨域请求的解决方案
Mar 06 jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 jQuery
jQuery选择器选中最后一个元素,倒数第二个元素操作示例
Dec 10 jQuery
jQuery实现input[type=file]多图预览上传删除等功能
Aug 02 jQuery
Jquery实现获取子元素的方法分析
Aug 24 jQuery
jQuery实现倒计时功能完整示例
Jun 01 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 socket方式提交的post详解
2008/07/19 PHP
PHP实现邮件群发的源码
2013/06/18 PHP
php处理多图上传压缩代码功能
2018/06/13 PHP
PHP实现的多维数组去重操作示例
2018/07/21 PHP
Laravel 创建指定表 migrate的例子
2019/10/09 PHP
thinkPHP事务操作简单案例分析
2019/10/17 PHP
JS对img进行操作(换图片/切图/轮换/停止)
2013/04/17 Javascript
利用js的Node遍历找到repeater的一个字段实例介绍
2013/04/25 Javascript
easyui datagrid 键盘上下控制选中行示例
2014/03/31 Javascript
ionic实现带字的toggle滑动组件
2016/08/27 Javascript
ES6记录异步函数的执行时间详解
2016/08/31 Javascript
基于百度地图实现产品销售的单位位置查看功能设计与实现
2016/10/21 Javascript
教大家轻松制作Bootstrap漂亮表格(table)
2016/12/13 Javascript
vue实现ajax滚动下拉加载,同时具有loading效果(推荐)
2017/01/11 Javascript
react 中父组件与子组件双向绑定问题
2019/05/20 Javascript
JS简易计算器实例讲解
2020/06/30 Javascript
[01:01]青春无憾,一战成名——DOTA2全国高校联赛开启
2018/02/25 DOTA
DJANGO-ALLAUTH社交用户系统的安装配置
2014/11/18 Python
Python中实现常量(Const)功能
2015/01/28 Python
Collatz 序列、逗号代码、字符图网格实例
2017/06/22 Python
Python 3实战爬虫之爬取京东图书的图片详解
2017/10/09 Python
Python之列表的插入&amp;替换修改方法
2018/06/28 Python
django数据库自动重连的方法实例
2019/07/21 Python
Python使用百度api做人脸对比的方法
2019/08/28 Python
django实现web接口 python3模拟Post请求方式
2019/11/19 Python
python实现FTP文件传输的方法(服务器端和客户端)
2020/03/20 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
用python获取txt文件中关键字的数量
2020/12/24 Python
CSS3实现王者匹配时的粒子动画效果
2019/04/12 HTML / CSS
实习医生自我评价
2013/09/22 职场文书
师范大学应届生求职信
2013/11/21 职场文书
酒店中秋节促销方案
2014/01/30 职场文书
超市国庆节促销方案
2014/02/20 职场文书
士力架广告词
2014/03/20 职场文书
详细的本科生职业生涯规划范文
2014/09/16 职场文书
Python之Matplotlib绘制热力图和面积图
2022/04/13 Python