Jquery超简单遮罩层实现代码
2016-06-12 11:05
756 查看
1.主要样式设置:
<span style="color:#FF0000;">CSS代码:</span>
<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; } </style>
其中: opacity:0.5;适用于IE, -moz-opacit:0.5;适用于火狐;你只需要都加上,便可以火狐和IE下都可以使用.
2.指定层的宽度和高度.
<span style="color:#FF0000;">js代码:</span>
<pre class="html" name="code"><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>中加入如下代码,然后就可以看效果了:
<span style="color:#FF0000;">html代码</span>
<div id="mask" class="mask"></div> <a href="javascript:;" onclick="showMask()" >点我显示遮罩层</a><br />
<span style="color:#FF0000;">4.使用方法:</span>
在ajax提交表单后,加上showMask方法,数据返回后,加上hideMask() 需要的亲们可以根据自己需求,在遮罩层上面加一些提示信息
相关文章推荐
- Jquery实现简单遮罩层
- jQuery的each循环用法简单示例
- 基于jquery插件编写countdown计时器
- 浅谈jquery的map()和each()方法
- Jquery 自定义事件实现发布/订阅的简单实例
- JQuery EasyUI 引用加载分析、文件分析
- jquery input change事件
- manhua原创jQuery消息提示框特效插件
- jQuery 3 中的新增功能汇总介绍
- jQuery 元素遍历
- 浅谈jquery点击label触发2次的问题
- Jquery tab插件wdScrollTab 在chrome中出现不兼容的问题
- jQuery 操作CSS
- Jquery弹出框效果 自己下载看看是否搭配风格
- 自定义jquery插件探索篇-自定义分页插件
- Jquery自带的弹出框效果
- jQuery获取Table-Input控件值封装
- jQuery EasyUI-动态改变主题
- 省市县联动 php处理 生成js文件 并且jquery 调用
- jquery对DOM的遍历,实用且高效!