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源码解读之extend()与工具方法、实例方法详解
Mar 30 jQuery
jQuery查找dom的几种方法效率详解
May 17 jQuery
jQuery开源组件BootstrapValidator使用详解
Jun 29 jQuery
jQuery实现可兼容IE6的淡入淡出效果告警提示功能示例
Sep 20 jQuery
使用JQuery实现图片轮播效果的实例(推荐)
Oct 24 jQuery
jQuery实现百度图片移入移出内容提示框上下左右移动的效果
Jun 05 jQuery
jquery.pagination.js分页使用教程
Oct 23 jQuery
jQuery+vue.js实现的多选下拉列表功能示例
Jan 15 jQuery
jQuery实现条件搜索查询、实时取值及升降序排序的方法分析
May 04 jQuery
JQuery的加载和选择器用法简单示例
May 13 jQuery
使用jQuery mobile NuGet让你的网站在移动设备上同样精彩
Jun 18 jQuery
JS秒杀倒计时功能完整实例【使用jQuery3.1.1】
Sep 03 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获取QQ达人QQ信息的方法
2015/03/05 PHP
Zend Framework教程之Zend_Db_Table表关联实例详解
2016/03/23 PHP
php简单生成一组与多组随机字符串的方法
2017/05/09 PHP
PHP实现防盗链的方法分析
2017/07/25 PHP
PHP常量define和const的区别详解
2019/05/18 PHP
UserData用法总结 lanyu出品
2010/07/01 Javascript
js 获取后台的字段 改变 checkbox的被选中的状态 代码
2013/06/05 Javascript
js统计页面的来访次数实现代码
2014/05/09 Javascript
利用js实现禁止复制文本信息
2015/06/03 Javascript
JavaScript根据CSS的Media Queries来判断浏览设备的方法
2016/05/10 Javascript
AngularJS入门教程之服务(Service)
2016/07/27 Javascript
浅谈JS中的!=、== 、!==、===的用法和区别
2016/09/24 Javascript
基于JS实现bookstore静态页面的实例代码
2017/02/22 Javascript
微信小程序开发之toast等弹框提示使用教程
2017/06/08 Javascript
VUE长按事件需求详解
2017/10/18 Javascript
详解vue.js数据传递以及数据分发slot
2018/01/20 Javascript
详解刷新页面vuex数据不消失和不跳转页面的解决
2018/01/30 Javascript
详解Angularjs 自定义指令中的数据绑定
2018/07/19 Javascript
JavaScript对象的特性与实践应用深入详解
2018/12/30 Javascript
在layui中layer弹出层点击事件无效的解决方法
2019/09/05 Javascript
[01:10:02]IG vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.19
2018/08/21 DOTA
简述Python中的面向对象编程的概念
2015/04/27 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
python使用openpyxl库修改excel表格数据方法
2018/05/03 Python
python实现nao机器人手臂动作控制
2019/04/29 Python
如何使用python实现模拟鼠标点击
2020/01/06 Python
Python SSL证书验证问题解决方案
2020/01/13 Python
Python Django form 组件动态从数据库取choices数据实例
2020/05/19 Python
蔬菜基地的创业计划书
2014/01/06 职场文书
趣味比赛活动方案
2014/02/15 职场文书
委托书模板
2014/04/04 职场文书
写求职信有哪些注意事项
2014/05/08 职场文书
匿名信格式范文
2015/05/27 职场文书
python自动化调用百度api解决验证码
2021/04/13 Python
Mysql文件存储图文详解
2021/06/01 MySQL
golang特有程序结构入门教程
2021/06/02 Python