JqueryUI dialog无法正常打开
我遇到的问题是这样的:在一个页面有个iframe,iframe能easyUI的Tab点击打开不同的Tab标签。每个标签就是一个子页面。然后我打开了多个子页面,我在其中一个子页面发送一个ajax请求,发送ajax请求后会用使用JqueryUI的dialog打开窗口。 当我在ajax请求会返回结果时,切换Tab子页面,去其他子页面做其他事情。等会再切换Tab过去时,dialog的弹出窗口不见了。
检查了好几遍,不是弹出窗口没有弹出来,而且是弹出下下面去了。页面也增加了一个滑动条。页面拉长了很多。用IE的页面布局工具查看了一下,dialog的长宽都超过10000px了。查看了下Jquery UI 的源码,发现在取其坐标的时候出问题了,估计其原因是不同body引起的。
修改了一下源码,给了个绝对定位。这是没办法的办法了,具体原因还有待研究解决。
......
$.widget("ui.dialog", {
options: {
autoOpen: true,
buttons: {},
closeOnEscape: true,
closeText: 'close',
dialogClass: '',
draggable: true,
hide: null,
height: 'auto',
maxHeight: false,
maxWidth: false,
minHeight: 150,
minWidth: 150,
modal: false,
position: {
my: 'center',
at: 'center',
collision: 'fit',
// ensure that the titlebar is never outside the document
using: function(pos) {
var topOffset = $(this).css(pos).offset().top;
if (topOffset < 0) {
$(this).css('top', pos.top - topOffset);
// add by sw 2013-3-7 Tab切换引起的弹出窗口无法正常显示,绝对定位
if((pos.top - topOffset)>1500){
var browserWidth = document.documentElement.scrollWidth;
var browserHeight = document.documentElement.scrollHeight;
$(this).css('top', browserHeight/2-100);
$(this).css('left', browserWidth/2-200);
}
//end
}
}
},
resizable: true,
show: null,
stack: true,
title: '',
width: 300,
zIndex: 1000
},......