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 相关文章推荐
跨域表单提交状态的变相判断代码
Nov 12 Javascript
单击浏览器右上角的X关闭窗口弹出提示的小例子
Jun 12 Javascript
提高jQuery性能的十个诀窍
Nov 14 Javascript
浅谈checkbox的一些操作(实战经验)
Nov 20 Javascript
js继承call()和apply()方法总结
Dec 08 Javascript
举例讲解JavaScript中关于对象操作的相关知识
Nov 16 Javascript
JavaScript中return用法示例
Nov 29 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
使用Vue开发动态刷新Echarts组件的教程详解
Mar 22 Javascript
Vue一次性简洁明了引入所有公共组件的方法
Nov 28 Javascript
转换layUI的数据表格中的日期格式方法
Sep 19 Javascript
简单了解vue中的v-if和v-show的区别
Oct 08 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中创建并处理图象
2006/10/09 PHP
一个简单实现多条件查询的例子
2006/10/09 PHP
php合并数组array_merge函数运算符加号与的区别
2008/10/31 PHP
PHP5常用函数列表(分享)
2013/06/07 PHP
php登录超时检测功能实例详解
2017/03/21 PHP
laravel框架模型中非静态方法也能静态调用的原理分析
2019/11/23 PHP
javascript里的条件判断
2007/02/27 Javascript
jquery ajax 登录验证实现代码
2009/09/23 Javascript
jquery入门—数据删除与隔行变色以及图片预览
2013/01/07 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
Node.js事件循环(Event Loop)和线程池详解
2015/01/28 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
js+css实现上下翻页相册代码分享
2015/08/18 Javascript
jquery实现的横向二级导航效果代码
2015/08/26 Javascript
详解javascript事件冒泡
2016/01/09 Javascript
JQuery的attr 与 val区别
2016/06/12 Javascript
浅谈JS之tagNaem和nodeName
2016/09/13 Javascript
vue综合组件间的通信详解
2017/11/06 Javascript
详解关于element el-button使用$attrs的一个注意要点
2018/11/09 Javascript
微信小程序canvas.drawImage完全显示图片问题的解决
2018/11/30 Javascript
简单介绍Python中的RSS处理
2015/04/13 Python
Python进行数据提取的方法总结
2016/08/22 Python
Python贪吃蛇游戏编写代码
2020/10/26 Python
Python实现的FTP通信客户端与服务器端功能示例
2018/03/28 Python
每天迁移MySQL历史数据到历史库Python脚本
2018/04/13 Python
使用Django开发简单接口实现文章增删改查
2019/05/09 Python
使用coverage统计python web项目代码覆盖率的方法详解
2019/08/05 Python
python flask搭建web应用教程
2019/11/19 Python
Django 解决新建表删除后无法重新创建等问题
2020/05/21 Python
Pycharm中如何关掉python console
2020/10/27 Python
大学生的应聘自我评价
2013/12/13 职场文书
家长评语大全
2014/01/22 职场文书
2015年乡镇工作总结范文
2015/04/22 职场文书
SQL CASE 表达式的具体使用
2022/03/21 SQL Server
Python  lambda匿名函数和三元运算符
2022/04/19 Python
MySQL索引失效场景及解决方案
2022/07/23 MySQL