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 相关文章推荐
JavaScript类和继承 constructor属性
Mar 04 Javascript
js获取当前select 元素值的代码
Apr 19 Javascript
js多级树形弹出一个小窗口层(非常好用)实例代码
Mar 19 Javascript
关于JavaScript中的关联数组分析
Apr 09 Javascript
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
Jun 24 Javascript
JS实现slide文字框缩放伸展效果代码
Nov 05 Javascript
js实现canvas保存图片为png格式并下载到本地的方法
Aug 31 Javascript
React中如何引入Angular组件详解
Aug 09 Javascript
详解@Vue/Cli 3 Invalid Host header 错误解决办法
Jan 02 Javascript
JS数组的高级使用方法示例小结
Mar 14 Javascript
JS数组Reduce方法功能与用法实例详解
Apr 29 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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设计模式 Adapter(适配器模式)
2011/06/26 PHP
PHP操作MongoDB GridFS 存储文件的详解
2013/06/20 PHP
php中namespace use用法实例分析
2016/01/22 PHP
php web环境和命令行环境下查找php.ini的位置
2019/07/17 PHP
可以显示单图片,多图片ajax请求的ThickBox3.1类下载
2007/12/23 Javascript
第一个JavaScript入门基础 document.write输出
2010/02/22 Javascript
浅谈Javascript鼠标和滚轮事件
2012/06/27 Javascript
JS取文本框中最小值的简单实例
2013/11/29 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
js验证手机号、密码、短信验证码代码工具类
2020/06/24 Javascript
jQuery实现一个简单的轮播图
2017/02/19 Javascript
jQuery滑动到底部加载下一页数据的实例代码
2017/05/22 jQuery
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
快速了解vue-cli 3.0 新特性
2018/02/28 Javascript
Vue.Draggable拖拽功能的配置使用方法
2020/07/29 Javascript
解决layui数据表格Date日期格式的回显Object的问题
2019/09/19 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
JS实现的定时器展示简单秒表、页面弹框及跳转操作完整示例
2020/01/26 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
Vue左滑组件slider使用详解
2020/08/21 Javascript
[04:10]DOTA2英雄梦之声_第11期_圣堂刺客
2014/06/21 DOTA
完美解决Python2操作中文名文件乱码的问题
2017/01/04 Python
Python读写docx文件的方法
2018/05/08 Python
在keras中获取某一层上的feature map实例
2020/01/24 Python
如何用css3实现switch组件开关的方法
2018/02/09 HTML / CSS
美国运动鞋和运动服零售商:Footaction
2017/04/07 全球购物
工商管理专业学生的自我评价
2013/10/01 职场文书
学年自我鉴定范文
2013/10/01 职场文书
咖啡厅创业计划书范本
2014/01/22 职场文书
分家协议书
2014/04/21 职场文书
房地产置业顾问岗位职责
2015/04/11 职场文书
高中开学感言
2015/08/01 职场文书
诗词赏析-(浣溪沙)
2019/08/13 职场文书
golang特有程序结构入门教程
2021/06/02 Python
mysql主从复制的实现步骤
2021/10/24 MySQL
Golang 实现WebSockets
2022/04/24 Golang