Jquery+CSS实现遮罩效果
2024-09-04 20:20:05
JavaScript:
(function ($) {
$.fn.ShowMask = function (options) {
var defaults = {
top: 150,
left: 200
}
var options = $.extend(defaults, options);
$("html").append('<div id="ui-mask"></div><div id="ui-mask-div" style="z-index: 99999;position: fixed;top:' + options.top + 'px;left:' + options.left + 'px;"><img src="Images/ui-loading.gif" alt="" /><span>操作正在进行中,请耐心等待......</span></div>')
_this_ = $("#ui-mask"); _this_.height($(document).height())
_this_.show();
};
$.fn.HideMask = function (options) {
_this_ = $("#ui-mask");
_this_.remove();
};
})(jQuery);
CSS:
#ui-mask
{
background-color: #666;
position: absolute;
z-index:;
left:;
top:;
display: none;
width: 100%;
height: 100%;
opacity: 0.5;
filter: alpha(opacity=50);
-moz-opacity: 0.5;
}
#ui-mask-div img
{
width: 50px;
height: 50px;
float: left;
}
#ui-mask-div span
{
height: 50px;
line-height: 50px;
display: block;
float: left;
color: Red;
font-weight: bold;
margin-left: 5px;
}
JavaScript调用:
function btn_save()
{
$(this).ShowMask();
$.post('url',null,function(d,s){
$(this).HideMask();
});
}
大家试试吧!
最新文章
- OC与JavaScript的交互
- Repeater的Item项绑定DropDownList
- maven webjar构建及使用
- IIS7.5 在已有的WEB网站上配置FTP发布
- Oracle 多表查询优化
- Javascript 封装方法
- CSS3关于transition过渡
- [原创]pg_shard使用场景及功能测试
- tcp 多线程与多进程调用close
- Android JNI 由C/C++本地代码向Java层传递数据
- Myeclipse 设定文件的默认打开方式
- jsp 行动标签
- 负载均衡软件LVS分析四(测试)
- P1137 旅行计划-----洛谷
- Openstack(企业私有云)万里长征第一步——安装
- Mysql基础教程-Mysql的字符集查看与修改
- 微软官方的Excel android 移动版的折腾
- 【QT】打开文件对话框,选择路径下文件
- Hybrid App中原生页面 VS H5页面(分享)
- flex属性的学习