`
aishu
  • 浏览: 23746 次
  • 性别: Icon_minigender_1
  • 来自: 广州
社区版块
存档分类
最新评论

关于JqueryUI dialog无法正常打开

阅读更多
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
	},......
分享到:
评论

相关推荐

    jquery ui dialog 扩展

    这里,`open`事件在Dialog打开时触发,`load`函数负责从"ajax/content.html"加载内容。点击`#opener`元素时,Dialog被打开并展示加载的内容。 在`jquery-ui-ex-dialog.js`文件中,我们可能看到了Dialog的一些高级...

    JQuery UI Dialog

    JQuery UI Dialog 对话框属性详解 JQuery UI Dialog 是一个功能强大且灵活的对话框组件,它提供了许多有用的属性和方法来帮助开发者快速创建自定义的对话框。在本文中,我们将详细介绍 JQuery UI Dialog 的一些重要...

    JQuery UI Dialog使用样例

    **jQuery UI Dialog 使用详解** jQuery UI 是一个基于 jQuery 的用户界面库,提供了丰富的交互组件,其中 Dialog(对话框)是一个非常实用的功能。Dialog 可以用于创建模态或非模态窗口,通常用于显示警告、确认...

    jquery ui中的dialog

    例如,当Dialog打开时执行某些操作: ```javascript $("#dialog").dialog({ open: function() { console.log("对话框已打开"); }, }); ``` 4. **方法调用** 除了初始化,还可以使用Dialog的一些内置方法来...

    Jquery UI dialog 详解 (弹出层)

    ### Jquery UI Dialog 详解(弹出层) #### 一、引言 Jquery UI Dialog 是 jQuery UI 库中的一个重要组件,它提供了一个简洁而强大的界面来创建对话框或者弹出层。通过简单的配置和使用,开发人员可以轻松地集成...

    jqueryUI_dialog实例

    本文将深入探讨“jqueryUI_dialog实例”,这是一个关于如何使用jQuery UI库创建对话框(Dialog)功能的实践案例。 jQuery UI的Dialog组件是网页应用中常见的一种交互元素,用于显示模态或非模态窗口,例如警告、...

    jQuery UI dialog 的使用

    在web开发中,jQuery UI...首先,要使用jQuery UI的dialog组件,必须确保已经正确引入了jQuery库以及jQuery UI库。根据提供的内容,我们了解到引入jQuery库的方式是通过在HTML文档的部分插入标签,如下所示: ```html ...

    jquery-ui-dialog-demo

    `jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例,它提供了丰富的交互式对话框功能,包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开(open)模式。这个插件使得在...

    jQuery UI Frame Dialog官方修正版(官方1.1.2版本上面有问题)

    在官方1.1.2版本中,存在一个CSS加载问题,导致对话框的样式可能无法正常显示,影响了用户体验。这个问题在后续的修正版中得到了解决。 jQuery UI是一个强大的JavaScript库,它扩展了基础的jQuery库,提供了丰富的...

    jquery_dialog jquery_dialog jquery_dialog

    2. 配置选项:jQuery Dialog支持多种配置选项,如宽度、高度、是否可拖动、是否自动打开等。例如,设置对话框宽度为300像素且不可拖动: ```javascript $("#dialog").dialog({ width: 300, draggable: false }); `...

    jqueryUI dialog

    《jQuery UI Dialog详解及其应用实践》 jQuery UI Dialog是一款基于jQuery库的强大对话框组件,它为Web应用程序提供了灵活且功能丰富的交互式对话框。Dialog组件不仅支持基本的弹出框功能,还可以实现模态对话框、...

    demo_jquery-dialog

    - `open`: 在Dialog打开时触发。 - `close`: 在Dialog关闭时触发。 - `.dialog('open')`: 打开Dialog。 - `.dialog('close')`: 关闭Dialog。 - `.dialog('option', optionName, value)`: 修改Dialog的选项。 **4. ...

    jqueryUI插件中Dialog的运用

    **jQuery UI插件中的Dialog组件详解** jQuery UI是一款强大的JavaScript库,它提供了丰富的用户界面组件,包括对话框(Dialog)、日期选择器、滑块、排序等。Dialog组件是jQuery UI中的一个核心功能,用于创建模态...

    jQueryUI全教程之一dialog[汇编].pdf

    《jQueryUI全教程之一:对话框(Dialog)的深度解析》 jQuery UI 是一款基于 jQuery 库的强大前端用户界面工具包,提供了丰富的组件和交互效果,其中包括Dialog组件,也就是我们通常所说的弹出层。Dialog在网页设计...

    关于jQuery-Ui的引用文件

    通过访问在线工具(如 http://jqueryui.com/themeroller/),可以选择颜色、字体、边框等样式,生成定制的主题 CSS 文件。下载后,替换默认的 `jquery-ui.min.css` 文件,即可实现整个 UI 的风格统一。 ### 3. 常见...

    jquery-dialog demo

    jQuery Dialog 是一个强大的弹出窗口组件,它是 jQuery UI 库的一部分,用于在网页上创建可交互的对话框。这个组件提供了丰富的功能,如可定制的样式、拖动、调整大小、自动定位以及多种关闭选项等,广泛应用于提示...

    jquery.ui.dialog修改版,支持closable

    《jQuery UI Dialog 修改版:支持可关闭性控制详解》 jQuery UI 是一个强大的JavaScript库,提供了许多用户界面组件,其中包括Dialog(对话框)模块。Dialog组件可以用来创建模态或非模态的弹出窗口,常用于显示...

    jQuery插件 dialog

    首先,我们来详细了解一下 jQuery UI 的 dialog 插件。jQuery UI 是一套完整的用户界面库,包含了多种组件和效果,如拖放、排序、日期选择器等,而 dialog 是其核心组件之一。它能够将任何 HTML 元素(如 div)转换...

    最新jQueryUI组件下载

    这个“最新jQueryUI组件下载”应该指的是版本号为1.10.0的jQuery UI压缩包。 jQuery UI 包含了大量的可交互和视觉上吸引人的元素,它简化了网页开发,让开发者可以快速实现复杂且用户友好的界面设计。以下是一些...

    jQueryUI官方实例集

    接着,jQueryUI的对话框(Dialog)组件是网页中常见的一种交互形式,它可以创建模态或非模态的窗口,用于显示警告、确认信息或者提供额外的操作空间。通过设置不同的选项,如`autoOpen`、`modal`、`width`、`buttons...

Global site tag (gtag.js) - Google Analytics