jquery ui的dialog默认弹出位置为页面的中部,如果页面特别长,则弹出框可能在第一屏中看不到,需要自定义弹出的位置:
jquery ui的dialog默认弹出位置为{ my: "center", at: "center", of: window }
具体参见dialog的api:http://api.jqueryui.com/dialog/#option-position
positionType: Object or String or Array
Default:
{ my: "center", at: "center", of: window }
Specifies where the dialog should be displayed. The dialog will handle collisions such that as much of the dialog is visible as possible.
Note: The String
and Array
forms are deprecated.
Multiple types supported:
-
Object: Identifies the position of the dialog when opened. The
of
option defaults to the window, but you can specify another element to position against. You can refer to the jQuery UI Position utility for more details about the various options. -
String: A string representing the position within the viewport. Possible values:
"center"
,"left"
,"right"
,"top"
,"bottom"
. - Array: An array containing an x, y coordinate pair in pixel offset from the top left corner of the viewport or the name of a possible string value.
Code examples:
Initialize the dialog with the position
option specified:
可以通过自定义position来自定义弹出位置,position文档:
http://api.jqueryui.com/position/
-
my (default:
"center"
)Type: StringDefines which position on the element being positioned to align with the target element: "horizontal vertical" alignment. A single value such as"right"
will be normalized to"right center"
,"top"
will be normalized to"center top"
(following CSS convention). Acceptable horizontal values:"left"
,"center"
,"right"
. Acceptable vertical values:"top"
,"center"
,"bottom"
. Example:"left top"
or"center center"
. Each dimension can also contain offsets, in pixels or percent, e.g.,"right+10 top-25%"
. Percentage offsets are relative to the element being positioned. -
at (default:
"center"
)Type: StringDefines which position on the target element to align the positioned element against: "horizontal vertical" alignment. See themy
option for full details on possible values. Percentage offsets are relative to the target element. -
of (default:
null
)Which element to position against. If you provide a selector or jQuery object, the first matching element will be used. If you provide an event object, thepageX
andpageY
properties will be used. Example:"#top-menu"
我最终采取的方式为:
position: { my: "center", at: "left+800px top+500px ", of: window }
//结合jquery ui ,优化系统提示 $(function() { $("<div id='dialog' title='系统提示'>").appendTo("body"); $( "#dialog" ).dialog({ autoOpen: false, modal: true, position: { my: "center", at: "left+800px top+500px ", of: window } , buttons: { "确定": function() { $( this ).dialog( "close" ); } } }); }); function showMessage(message) { $( "#dialog" ).html("<p>"+message+"</p>"); $( "#dialog" ).dialog("open"); }
相关推荐
Jquery UI dialog 详解 (弹出层) 包含jquery弹出层的详细介绍,以及代码用例
添加按钮弹出层jqueryui实现,dialog
两个版本:一个替换ui close按钮,对三个按钮设立同样css;一个不替换,修改ui的css文件;完美打开多个对话框,并可以分别控制最大最小关闭。jquery文件没有包含进来。
里面是经过修改的jquery.ui.dialog.js(版本jQuery UI Dialog 1.8.12),添加了parentElement: 'body',详情查看http://forum.jquery.com/topic/dialog-will-move-its-div-tag-to-body
基于 jquery 项目中 用到的dialog弹出层 一种弹出层
jquery弹出效果实例,展示了jquery对弹出窗口的多个实例,弹出窗口框,弹出框内弹出页面,
NULL 博文链接:https://lishuaishuai.iteye.com/blog/1267230
jQuery_UI全教程之一_dialog以及Datepicker使用说明 jQuery UI全教程之一(dialog的使用教程) 2011-03-15 17:41 jQuery UI目前的版本已经更新到了1.8.7。个人感觉和easyui相比起来,jQuery UI在界面的美观程度和可...
NULL 博文链接:https://taotie119.iteye.com/blog/2075536
自定义Dialog 模拟popupwindow功能,随意改变Dialog位置。可以简单设置Dialog位于某个控件的上方、下方、左边、右边。
JQuery UI 的对话框的一些属性的用法
自定义底部弹出Dialog
jquery 弹出窗口插件,包含js中的 alert confirm open 等。
自定义dialog弹出框,通过shape和seleter自定义出自己想要的样式。还有弹出的动画,从不同方向弹出和效果。
本文实例讲述了jquery弹出框插件jquery.ui.dialog用法。分享给大家供大家参考,具体如下: 1. jquery.ui.dialog 官方地址 http://jqueryui.net/dialog/ jquery.ui.dialog是一个非常灵活的模式框,它的官方地址为: ...
JQuery UI Dialog 弹出框以及清楚数据
用过这玩意的人就知道有个css一直加载不进去 找了好久才找到这么个东西
一个想当漂亮的jquery提示框:jQuery Modal Dialog弹出对话框插件,可用它实现各种的网页提示效果,比如错误提示框、警告框、操作提示框等,暖色调界面,使用方法简单,参考本例所展示的各种提示框生成办法,就可...
jQuery对话框Dialog弹出层插件演示与使用说明
NULL 博文链接:https://bijian1013.iteye.com/blog/2251715