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 相关文章推荐
ejs v9 javascript模板系统
Mar 21 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
学习javascript文件加载优化
Feb 19 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
JS实现table表格数据排序功能(可支持动态数据+分页效果)
May 26 Javascript
对Js OOP编程 创建对象的一些全面理解
Jul 26 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
Mar 06 Javascript
Vue.js列表渲染绑定jQuery插件的正确姿势
Jun 29 jQuery
使用JavaScript实现一个小程序之99乘法表
Sep 21 Javascript
vue 点击按钮增加一行的方法
Sep 07 Javascript
使用webpack4编译并压缩ES6代码的方法示例
Apr 24 Javascript
JS如何寻找数组中心索引过程解析
Jun 01 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 生成WML页面方法详解
2009/08/09 PHP
php解析字符串里所有URL地址的方法
2015/04/03 PHP
在openSUSE42.1下编译安装PHP7 的方法
2015/12/24 PHP
php基于curl实现的股票信息查询类实例
2016/11/11 PHP
thinkPHP实现基于ajax的评论回复功能
2018/06/22 PHP
在 PHP 和 Laravel 中使用 Traits的方法
2019/11/13 PHP
javascript Demo模态窗口
2009/12/06 Javascript
ajax页面无刷新 IE下遭遇Ajax缓存导致数据不更新的问题
2012/12/11 Javascript
jQuery中width()方法用法实例
2014/12/24 Javascript
基于MVC5和Bootstrap的jQuery TreeView树形控件(一)之数据支持json字符串、list集合
2016/08/11 Javascript
微信小程序开发之Tabbar实例详解
2017/01/09 Javascript
浅谈Vue2.0父子组件间事件派发机制
2018/01/08 Javascript
bootstrap-table实现表头固定以及列固定的方法示例
2019/03/07 Javascript
微信小程序实现同一页面取值的方法分析
2019/04/30 Javascript
原生js实现俄罗斯方块
2020/10/20 Javascript
利用JavaScript模拟京东按键输入功能
2020/12/01 Javascript
python中sets模块的用法实例
2014/09/30 Python
Python中的赋值、浅拷贝、深拷贝介绍
2015/03/09 Python
详解用TensorFlow实现逻辑回归算法
2018/05/02 Python
tensorflow 加载部分变量的实例讲解
2018/07/27 Python
Ubuntu下升级 python3.7.1流程备忘(推荐)
2018/12/10 Python
Python 循环终止语句的三种方法小结
2019/06/24 Python
Python HTTP下载文件并显示下载进度条功能的实现
2020/04/02 Python
TensorFLow 数学运算的示例代码
2020/04/21 Python
python中pandas库中DataFrame对行和列的操作使用方法示例
2020/06/14 Python
PyTorch实现重写/改写Dataset并载入Dataloader
2020/07/14 Python
最新pycharm安装教程
2020/11/18 Python
详解Python GUI编程之PyQt5入门到实战
2020/12/10 Python
selenium3.0+python之环境搭建的方法步骤
2021/02/01 Python
在python3.9下如何安装scrapy的方法
2021/02/03 Python
iHerb台湾:维生素、保健品和健康产品
2018/01/31 全球购物
2014年社区植树节活动方案
2014/02/28 职场文书
学生会生活部工作总结2015
2015/03/31 职场文书
党务工作者主要事迹材料
2015/11/03 职场文书
事业单位工作人员岗前培训心得体会
2016/01/08 职场文书
关于maven依赖 ${xxx.version}报错问题
2022/01/18 Java/Android