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+PHP+Mysql实现抽奖程序
Apr 12 jQuery
使用 jQuery 实现表单验证功能
Jul 05 jQuery
jquery使用iscorll实现上拉、下拉加载刷新
Oct 26 jQuery
jQuery实现的电子时钟效果完整示例
Apr 28 jQuery
如何用input标签和jquery实现多图片的上传和回显功能
May 16 jQuery
JS与jQuery实现ListBox上移,下移,左移,右移操作功能示例
May 31 jQuery
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery Raty星级评分插件使用方法实例分析
Nov 25 jQuery
jQuery实现简单弹幕效果
Nov 28 jQuery
jQuery实现可编辑的表格
Dec 11 jQuery
jQuery AJAX应用实例总结
May 19 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中$_SERVER[PHP_SELF] 和 $_SERVER[SCRIPT_NAME]之间的区别
2009/09/05 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
深入php list()函数的详解
2013/06/05 PHP
简单了解PHP编程中数组的指针的使用
2015/11/30 PHP
php封装的表单验证类完整实例
2016/10/19 PHP
PHP 以POST方式提交XML、获取XML,解析XML详解及实例
2016/10/26 PHP
laravel中的fillable和guarded属性详解
2019/10/23 PHP
js 禁用浏览器的后退功能的简单方法
2008/12/10 Javascript
JS 分号引起的一段调试问题
2009/06/18 Javascript
Extjs学习笔记之八 继承和事件基础
2010/01/08 Javascript
Jquery Change与bind事件代码
2011/09/29 Javascript
js日期范围初始化得到前一个月日期的方法
2015/05/05 Javascript
纯js实现无限空间大小的本地存储
2015/06/18 Javascript
JavaScript使用RegExp进行正则匹配的方法
2015/07/11 Javascript
JavaScript实现点击按钮切换网页背景色的方法
2015/10/17 Javascript
JavaScript前端开发之实现二进制读写操作
2015/11/04 Javascript
快速学习AngularJs HTTP响应拦截器
2015/12/31 Javascript
JavaScript+html5 canvas绘制渐变区域完整实例
2016/01/26 Javascript
JS实现随机颜色的3种方法与颜色格式的转化
2017/01/05 Javascript
原生javascript实现图片放大镜效果
2017/01/18 Javascript
js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果
2017/07/17 Javascript
webpack配置导致字体图标无法显示的解决方法
2018/03/06 Javascript
小程序如何支持使用 async/await详解
2019/09/12 Javascript
[53:15]Newbee vs Pain 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
剖析Python的Tornado框架中session支持的实现代码
2015/08/21 Python
python命令行参数用法实例分析
2019/06/25 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
详解用python计算阶乘的几种方法
2019/08/14 Python
PyQt5实现仿QQ贴边隐藏功能的实例代码
2020/05/24 Python
html5 canvas绘制网络字体的常用方法
2019/08/26 HTML / CSS
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
英国在线汽车和面包车零件商店:Car Parts 4 Less
2018/08/15 全球购物
一年级语文教学反思
2014/02/13 职场文书
光信息科学与技术专业职业生涯规划
2014/03/13 职场文书
党员学习中共十八大思想报告
2014/09/12 职场文书
python如何在word中存储本地图片
2021/04/07 Python