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"); }