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实现居中弹出层代码
Aug 25 Javascript
jQuery实用基础超详细介绍
Apr 11 Javascript
Bootstrap每天必学之折叠
Apr 12 Javascript
jQuery使用deferreds串行多个ajax请求
Aug 22 Javascript
bootstrap网格系统使用方法解析
Jan 13 Javascript
CentOS环境中MySQL修改root密码方法
Jan 07 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
Vue CLI2升级至Vue CLI3的方法步骤
May 20 Javascript
Vue使用axios出现options请求方法
May 30 Javascript
vue实现数据控制视图的原理解析
Jan 07 Javascript
vue项目中在可编辑div光标位置插入内容的实现代码
Jan 07 Javascript
vuex的数据渲染与修改浅析
Nov 26 Vue.js
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下连接ftp实现文件的上传、下载、删除文件实例代码
2010/06/03 PHP
ThinkPHP采用模块和操作分析
2011/04/18 PHP
php获取当月最后一天函数分享
2015/02/02 PHP
适用于初学者的简易PHP文件上传类
2015/10/29 PHP
微信红包随机生成算法php版
2016/07/21 PHP
PHP Mysqli 常用代码集合
2016/11/12 PHP
thinkPHP5实现的查询数据库并返回json数据实例
2017/10/23 PHP
JavaScript 精粹读书笔记(1,2)
2010/02/07 Javascript
js图片延迟加载的实现方法及思路
2013/07/22 Javascript
解析prototype,JQuery中跳出each循环的方法
2013/12/12 Javascript
浅析tr的隐藏和显示问题
2014/03/05 Javascript
php+ajax+jquery实现点击加载更多内容
2015/05/03 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
2015/10/09 Javascript
Node.js实现文件上传
2016/07/05 Javascript
JS判断鼠标进入容器的方向与window.open新窗口被拦截的问题
2016/12/23 Javascript
javascript实现下雨效果
2017/03/27 Javascript
微信小程序新增的拖动组件movable-view使用教程
2017/05/20 Javascript
Angular 1.x个人使用的经验小结
2017/07/19 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
详解webpack 入门与解析
2018/04/09 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
微信小程序module.exports模块化操作实例浅析
2018/12/20 Javascript
NodeJS实现同步的方法
2019/03/02 NodeJs
详解JS取出两个数组中的不同或相同元素
2019/03/20 Javascript
Vue2(三)实现子菜单展开收缩,带动画效果实现方法
2019/04/28 Javascript
vue动态禁用控件绑定disable的例子
2019/10/28 Javascript
Python 第一步 hello world
2009/09/25 Python
使用python搭建Django应用程序步骤及版本冲突问题解决
2013/11/19 Python
python实现图片识别汽车功能
2018/11/30 Python
wxPython实现文本框基础组件
2019/11/18 Python
什么是接口(Interface)?
2013/02/01 面试题
赔偿协议书范本
2014/04/15 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
银行给客户的感谢信
2015/01/23 职场文书
mysql函数全面总结
2021/11/11 MySQL
html中两种获取标签内的值的方法
2022/06/10 HTML / CSS