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 StringBuilder类实现
Dec 22 Javascript
JavaScript Cookie显示用户上次访问的时间和次数
Dec 08 Javascript
jquery简单瀑布流实现原理及ie8下测试代码
Jan 23 Javascript
9个让JavaScript调试更简单的Console命令
Nov 14 Javascript
bootstrap组件之导航组件使用方法
Jan 19 Javascript
基于构造函数的五种继承方法小结
Jul 27 Javascript
Form表单上传文件(type=&quot;file&quot;)的使用
Aug 03 Javascript
移动web开发之touch事件实例详解
Jan 17 Javascript
解决vue-cli创建项目的loader问题
Mar 13 Javascript
JavaScript实现的前端AES加密解密功能【基于CryptoJS】
Aug 28 Javascript
详解如何解决Vue和vue-template-compiler版本之间的问题
Sep 17 Javascript
jQuery+Datatables实现表格批量删除功能【推荐】
Oct 24 jQuery
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
preg_match_all使用心得分享
2014/01/31 PHP
PHP实现远程下载文件到本地
2015/05/17 PHP
区分JS中的undefined,null,&quot;&quot;,0和false
2007/03/08 Javascript
19个很有用的 JavaScript库推荐
2011/06/27 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
2013/06/09 Javascript
使用js的replace()方法查找字符示例代码
2013/10/28 Javascript
两个多选select(multiple左右)添加、删除选项和取值实例
2014/05/12 Javascript
分享一个常用的javascript静态类
2014/12/31 Javascript
JQuery标签页效果的两个实例讲解(4)
2015/09/17 Javascript
简单理解vue中el、template、replace元素
2016/10/27 Javascript
JavaScript mixin实现多继承的方法详解
2017/03/30 Javascript
Angular2使用Angular CLI快速搭建工程(一)
2017/05/21 Javascript
js实现随机数小游戏
2019/06/28 Javascript
Javascript和jquery在selenium的使用过程
2019/10/31 jQuery
JavaScript隐式类型转换代码实例
2020/05/29 Javascript
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
2020/08/06 Javascript
用Python实现一个简单的线程池
2015/04/07 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
Python MySQLdb 使用utf-8 编码插入中文数据问题
2018/03/13 Python
用Python将结果保存为xlsx的方法
2019/01/28 Python
python 定时器,轮询定时器的实例
2019/02/20 Python
tensorflow如何批量读取图片
2019/08/29 Python
PyTorch和Keras计算模型参数的例子
2020/01/02 Python
HTML5 客户端数据库简易使用:IndexedDB
2019/12/19 HTML / CSS
HttpServlet类中的主要方法都有哪些?各自的作用是什么?
2014/03/16 面试题
护林防火标语
2014/06/27 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
幼儿园小班开学寄语(2016秋季)
2015/12/03 职场文书
创业计划书之溜冰场
2019/10/25 职场文书
mysql多表查询-笔记七
2021/04/05 MySQL
html form表单基础入门案例讲解
2021/07/15 HTML / CSS
Log4j.properties配置及其使用
2021/08/02 Java/Android
Ajax异步刷新功能及简单案例
2021/11/20 Javascript
iSCSI服务器CHAP双向认证配置
2022/04/01 Servers
Android移动应用开发指南之六种布局详解
2022/09/23 Java/Android
PostgreSQL之连接失败的问题及解决
2023/05/08 PostgreSQL