jquery blockUI 遮罩不能消失与不能提交的解决方法


Posted in Javascript onSeptember 17, 2011
//显示遮罩 
$.blockUI({ 
message: $('#divlogin'), 
css:{width:"400px", height:"255px", top: ($(window).height() - 400) /2 + 'px', left: ($(window).width() - 400) /2 + 'px'} 
}); 
//取消遮罩 
$("#cancel").click(function() { 
$.unblockUI(); 
});

取消遮罩是,js 动态生成的外层没有消失。
在FF3.0.4,Chrome下都没问题,只是 IE6 IE7 Ie8下不正常。
打开源码,找到了下面这句话:
var lyr1 = ($.browser.msie) ? $('<iframe class="blockUI" style="z-index:'+ z++ +';border:none;margin:0;padding:0;position:absolute;width:100%;height:100%;top:0;left:0" src="javascript:false;"></iframe>') 
: $('<div class="blockUI" style="display:none"></div>');

可以看到,在IE下,它是生成了一个 iframe,并在这个 iframe 中加载你自己的对话框。
那么,现在只是外层不消失,自己手动让它消失。
$.blockUI({ message: $("#dialog")}); 
$("#cancel").click(function() { 
$.unblockUI(); 
$(".blockUI").fadeOut("slow"); 
});

OK,IE6 IE7都可以了。
使用blockui后,遮罩层数据不能提交到后台了,使用ajax可以
要提交到后来,请教后明白,遮罩层不再当前form中,所以提交后没有form不能提交
解决办法,把遮罩层部分,放置到form中
$('#divlogin').parent().appendTo(jQuery("form:first"));---还为完全找到放到form外面的遮罩层数据,所以不是很清楚。
Javascript 相关文章推荐
jQuery 全选/反选以及单击行改变背景色实例
Jul 02 Javascript
jQuery插件 selectToSelect使用方法
Oct 02 Javascript
一个简单的Node.js异步操作管理器分享
Apr 29 Javascript
Javascript中的五种数据类型详解
Dec 26 Javascript
javascript日期比较方法实例分析
Jun 17 Javascript
利用jquery获取select下拉框的值
Nov 23 Javascript
React学习笔记之条件渲染(一)
Jul 02 Javascript
解决webpack无法通过IP地址访问localhost的问题
Feb 22 Javascript
傻瓜式vuex语法糖kiss-vuex整理
Dec 21 Javascript
原生js实现日期选择插件
May 21 Javascript
详解React 条件渲染
Jul 08 Javascript
如何搭建一个完整的Vue3.0+ts的项目步骤
Oct 18 Javascript
ExtJs Excel导出并下载IIS服务器端遇到的问题
Sep 16 #Javascript
asp.net 30分钟掌握无刷新 Repeater
Sep 16 #Javascript
jquer之ajaxQueue简单实现代码
Sep 15 #Javascript
js substr、substring和slice使用说明小记
Sep 15 #Javascript
javascript 闭包
Sep 15 #Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 #Javascript
document.getElementById介绍
Sep 13 #Javascript
You might like
php环境无法上传文件的解决方法
2014/04/30 PHP
php实现每天自动变换随机问候语的方法
2015/05/12 PHP
今天你说520了吗?不仅有php表白书还有java表白神器
2016/05/20 PHP
javascript document.images实例
2008/05/27 Javascript
javascript自定义startWith()和endWith()的两种方法
2013/11/11 Javascript
批量修改标签css样式以input标签为例
2014/07/31 Javascript
三种取消选中单选框radio的方法
2014/09/09 Javascript
需要牢记的JavaScript基础知识
2016/09/25 Javascript
JavaScript字符集编码与解码详谈
2017/02/02 Javascript
原生js实现轮播图的示例代码
2017/02/20 Javascript
JavaScript递归函数解“汉诺塔”算法代码解析
2018/07/05 Javascript
elementUI Vue 单个按钮显示和隐藏的变换功能(两种方法)
2018/09/04 Javascript
在AngularJs中设置请求头信息(headers)的方法及不同方法的比较
2018/09/04 Javascript
基于vue-cli 路由 实现类似tab切换效果(vue 2.0)
2019/05/08 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Nodejs 数组的队列以及forEach的应用详解
2021/02/25 NodeJs
python迭代器实例简析
2014/09/25 Python
python中使用xlrd、xlwt操作excel表格详解
2015/01/29 Python
Python socket实现简单聊天室
2018/04/01 Python
Python3中的json模块使用详解
2018/05/05 Python
Windows系统下PhantomJS的安装和基本用法
2018/10/21 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
python使用SQLAlchemy操作MySQL
2020/01/02 Python
Django使用list对单个或者多个字段求values值实例
2020/03/31 Python
django rest framework 自定义返回方式
2020/07/12 Python
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
英国顶尖手表珠宝品牌独家授权经销商:HS Johnson
2020/10/28 全球购物
金士达面试非笔试
2012/03/14 面试题
中科软笔试题和面试题
2014/10/07 面试题
物流司机岗位职责
2013/12/28 职场文书
应届优秀本科大学毕业生自我鉴定
2014/01/21 职场文书
认识深刻的检讨书
2014/02/16 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
公司任命书范本
2014/06/04 职场文书
525心理健康活动总结
2015/05/08 职场文书
2015小学教师年度工作总结
2015/05/12 职场文书