jQuery UI 1.11 Dialog 垂直居顶,水平居中(头部居中)

jQuery Version: 1.10.2

jQuery UI Version:1.11

 Dialog Position setting code:

position{ my: "center top", at: "center top", of: window }

----------------------------------------------------------------------------------------

以下只是我个人记录的内容

由于自己做项目时,发现修改的项目的jQuery UI的版本比较低,使用了jQuery UI 1.11代替了目前修改项目的jQuery UI,在项目的有一个Dialog.js是的设定了Dialog基本的设定的参数。在设定position:"center"时,出现了问题,Dialog一直呆在左上角。

Dialog positon default options :

{ my: "center", at: "center", of: window }

在查看了jQuery UI API中的 .position(),或者中文的.position()之后,发现了:my,at都是定义水平,垂直方向的位置,类型是字符串,图片截图来自中文的.position()

如果我position设定为:

position:{ my: "center", at: "top", of: window }

在第二次弹出Dialog时,Dialog只能看到底部的按钮,不能看到Dialog的内容了,就不正常了。

如图:.

把dialog的position如以下设定,就可以解决Dialog 头部居中的问题了:

position:{ my: "center top", at: "center top", of: window }
时间: 2024-10-07 04:51:13

jQuery UI 1.11 Dialog 垂直居顶,水平居中(头部居中)的相关文章

jquery ui中的dialog,官网上经典的例子

jquery ui中的dialog,官网上经典的例子 jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这个控件. 1.实例 官网源代码中给出了一些实例,首先看看实例是什么样子的. a.默认功能 也是最简单的应用,也就是打开一个对话框,代码如下 <!doctype html> <html lang="en"> <head> <meta charset=&q

jQuery UI 对话框(Dialog) - 模态表单

<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>jQuery UI 对话框(Dialog) - 模态表单</title> <link rel="stylesheet" href="//apps.bdimg.com/libs/jqueryui/1.10.4/css/jquer

jQuery UI 1.10不再支持IE6,jQuery UI 1.11不再支持IE7

jQuery UI 1.10 Upgrade Guide(升级指南)中指出 jQuery UI 1.10 Removed support for IE6 IE6 usage has dropped to a low enough point that jQuery UI no longer finds it necessary to support. As of 1.10.0, some portions of jQuery UI may not work properly in IE6. If

Jquery UI - DatePicker 在Dialog中无法自动隐藏的解决思路

通过Jquery UI Dialog模态展示如下的一个员工编辑页面,但是遇到一个奇怪的问题:点击Start Date的input元素后,其无法失去焦点.从而导致DatePicker控件在选择日期后无法自动隐藏. 解决思路:给DatePicker加上onSelect事件,在该事件中让Start Date的input元素的父元素获取焦点,这样DatePicker控件在选择日期后就自动隐藏.

jquery ui中的dialog

jquery ui中dialog和easy ui中的dialog很像,但是最近用到的时候全然没有印象,一段时间不用就忘记了,这篇随笔介绍一下这个控件. 1.实例 官网源代码中给出了一些实例,首先看看实例是什么样子的. a.默认功能 也是最简单的应用,也就是打开一个对话框,代码如下 <!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <tit

jquery ui 学习随笔 dialog对话框

title  buttons  position show  hide autoOpen  Draggable  resizable modal closeText focus  create  open  beforeClose  close resize  resizeStart  resizeStop dialog('action',param) on()

Web 在线文件管理器学习笔记与总结(6)jQuery UI 预览图片

① 查看文件内容,如果文件是图片类型,点击直接查看图片: ② 如果不是图片类型,显示文件中的内容: ③ 使用 jQuery UI 中的 Dialog 显示图片 a.引入: <script src="jquery-1.8.3.min.js"></script> <script src="jquery-ui-1.11.3/jquery-ui.min.js"></script> <link rel="styl

使用jQuery ui创建模态表单

jQuery UI 是一个建立在 jQuery JavaScript 库上的小部件和交互库,可以使用它创建高度交互的 Web 应用程序. 在web页面的开发过程中,在添加元素的时候需要用到弹出窗口添加元素,最简便的就是直接通过一个隐藏的form来提交,在表单显示的时候通过js设置使得页面变暗和不可选,但是这样做未免过于麻烦,所需要的js语句也特别冗长,因此使用jQuery ui所提供的模态表单则显得简洁不少: 需要提到的是,jQueryui需要从 jQuery UI 网站上下载 jQuery U

Jquery Ui AutoComplete自动填写的功能

用到的jquery 和jquery ui 的版本如下: jQuery v1.12.4 jQuery UI - v1.11.0 有部分版本会有一些这样那样的问题,具体原因未深究. jquery 的代码如下 $("#id_customer").autocomplete({ source:function (request,response) { var findResult = []; $.ajax({ url:"/ips/get_customername_list/"