问题:在Asp.Net页面中用blockUI这个控件实现弹出窗口的效果,弹出页面内容为页面中某个Panel中的内容,包含TextBox、Button等服务器控件。使用时就简单的设置message属性。问题出来了,当显示这个弹出页面后,所有Button等服务器控件的Click等事件全部失效、即使通过js强制提交网页,PostBack之后取不到TextBox中填入的值。
解决思路:
1.怀疑这个控件把弹出页面中的事件冒泡取消了,以至Submit等事件没有触发:看了其js代码后并未发现任何相关程序。
2.这个弹出页面、遮罩层、Iframe的层级关系如何:其实也是无意中使用MS的IE Developer Tool Bar查看页面的DOM树,惊奇的发现,$.blockUI()之后message中的内容居然是直接append到body下面的,跟form同一层级,也就是说,本来Button(也就是submit)是属于这个form的,现在被拿出来了,那当然失效!
3.研读代码之后,blockUI只有两种:全屏遮罩和对特定elment进行遮罩,前者其实就是把message默认append到body下。和我要实现的效果有点出入,我希望仍然全屏遮罩,但若原先属于form的仍然append到原form下,正好介于两种遮罩方式之间。没办法啦,只能扩展代码来实现。
解决办法:
复述一下我的目的:既使用全屏遮罩,又要使得原form下的submit(Asp.Net服务器控件)仍然可用,为jQuery对象或选择器表达式
1.添加target属性,默认为'body'。看需要指定将message要加入哪个elment
2.将message这一层单独处理,append到target,并把target记录到blockUI.history中
3.unblock时根据blockUI.history的target定位到message层
不好意思,当时忘了附上修改后的js文件了: 下载
调用:
message: $("#myDiv"),
target: "#form1"
});