jquery blockUI 遮罩不能消失与不能提交的解决方法

代码如下:

//显示遮罩
$.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外面的遮罩层数据，所以不是很清楚。

赞 (0)

相关推荐

  • jquery实现简单的遮罩层

    本文实例讲解了jquery遮罩层,包括遮罩层的不同样式实现.mask实现遮罩层等,分享给大家供大家参考,具体内容如下 一.jQuery实现遮罩层的不同样式 1.1 背景半透明遮罩层样式 需要一个黑色(当然也可以其他)背景,且须设置为绝对定位,以下是项目中用到的css样式: /* 半透明的遮罩层 */ #overlay { background: #000; filter: alpha(opacity=50); /* IE的透明度 */ opacity: 0.5; /* 透明度 */ displa

  • jQuery+AJAX实现遮罩层登录验证界面（附源码）

    jQuery+AJAX实现遮罩层登录验证界面（附源码）

    JQuery遮罩层登录界面效果的实现,AJAX实现登录验证,文章尾有完整示例源码下载,欢迎大家学习研究. 操作系统:Windwos7 Ultimate 开发工具:Visual Studio 2010 数据库:Sql Server 2005 测试浏览器:IE8.FF3.6.8.Google Chrome (IE8中弹出登录层后会出现竖拉条,其他两种没有出现,那个竖拉条可以在JS中通过修改数值让其不出现,但是下面会出现白边,越来越觉得IE有点那个了......) 1.预览 1)登录前 2)点击登录显

  • jQuery实现弹出带遮罩层的居中浮动窗口效果

    jQuery实现弹出带遮罩层的居中浮动窗口效果

    本文实例讲述了jQuery实现弹出带遮罩层的居中浮动窗口效果.分享给大家供大家参考,具体如下: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>pop window</title> <style> *{ padding: 0; margin: 0; } .hide{ display: none

  • 使用jQuery制作遮罩层弹出效果的极简实例分享

    客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西.这种效果在网上很常见,例如:QQ空间浏览相册等.这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了Demo. HTML 结构 首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示.那么我们的 H

  • jquery.blockUI.js上传滚动等待效果实现思路及代码

    jquery.blockUI.js上传滚动等待效果实现思路及代码

    请求的url: 复制代码 代码如下: function request(url, onSuccess, paras, method, isAsync, isMask) { $.ajax({type:method,url:url,async:isAsync,data:paras,success:function(request){onSuccess(request,isMask);},error:function(e) {if(isMask) $('#div_mask').unblock();},

  • jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    jQuery实现带遮罩层效果的blockUI弹出层示例【附demo源码下载】

    本文实例讲述了jQuery实现带遮罩层效果的blockUI弹出层.分享给大家供大家参考,具体如下: 首先先附上代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:

  • jQuery弹出遮罩层效果完整示例

    jQuery弹出遮罩层效果完整示例

    本文实例讲述了jQuery弹出遮罩层效果.分享给大家供大家参考,具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head&

  • jQuery点击按钮弹出遮罩层且内容居中特效

    jQuery点击按钮弹出遮罩层且内容居中特效

    本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi

  • 基于jquery的blockui插件显示弹出层

    blockui可以在你发送ajax请求的时候,显示一个遮罩层禁止用户对页面进行操作并显示提示信息:或者用来显示一个登陆窗口,也可用来显示图片等. blockui插件主要使用blockUI和unblockUI两个方法来控制弹出层的显示或者隐藏,可以在blockUI方法中指定一些参数,来控制弹出层显示的内容,大小,位置等.blockUI方法的常用的参数有:message,css,overlayCSS,showOverlay. message:主要用来设置要显示的内容,可以直接设置为一段文字,html

  • Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)

    Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作) <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head>

  • jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    jQuery操作dom实现弹出页面遮罩层(web端和移动端阻止遮罩层的滑动)

    最近项目遇到了遮罩层的一些问题,总结一下: 弹出遮罩层 遮罩层弹出有非常多的方法,这里只写出本人用的代码,使用jq操作dom的方法进行实现的. <style>.box{position:absolute;width:100%;left:50%;height:auto;z-index:100;background-color:#f5f5f5;border:1px #ddd solid;padding:1px;}</style><div id="bg" v-c

随机推荐