自定义jquery ui 中dialog的弹出位置

这篇博客讨论了如何自定义jQuery UI Dialog的弹出位置,以避免当页面过长时,弹出框不在视窗范围内。默认情况下,Dialog位于页面中部。通过设置position选项,可以使用Object、String或Array来定位Dialog。例如,使用`position: { my: 'center', at: 'left+800px top+500px', of: window }`可以使Dialog在页面左侧偏下位置显示。" 114814248,10297191,使用Java GUI创建猜数字游戏,"['Java GUI', '游戏开发', '用户交互']
摘要由CSDN通过智能技术生成

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:  String
    Defines 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:  String
    Defines which position  on the target element to align the positioned element against: "horizontal vertical" alignment. See the  my option for full details on possible values. Percentage offsets are relative to the target element.
  • of (default:  null)
    Type:  Selector or  Element or  jQuery or  Event
    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, the  pageX and  pageY 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");
}

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值