当前位置:首页 > 开发 > Web前端 > Jquery > 正文

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

发表于: 2014-02-13   作者:bsr1983   来源:转载   浏览次数:
摘要: jquery ui的dialog默认弹出位置为页面的中部,如果页面特别长,则弹出框可能在第一屏中看不到,需要自定义弹出的位置: jquery ui的dialog默认弹出位置为{ my: "center", at: "center", of: window } 具体参见dialog的api:http://api.jqueryui.com/dialog/#o

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

 

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

  • 0

    开心

    开心

  • 0

    板砖

    板砖

  • 0

    感动

    感动

  • 0

    有用

    有用

  • 0

    疑问

    疑问

  • 0

    难过

    难过

  • 0

    无聊

    无聊

  • 0

    震惊

    震惊

编辑推荐
大家好 我想问下 用jquryUI dialog的弹出层的标题 内容 和下边的按钮 三部分的比例有什么属性可以设
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,
jQuery UI dialog 的使用 上一篇文章分享了一下 jQuery UI dialog 的简单使用,看到这么多同学都在
 自定义了Dialog然后弹出软键盘,但是键盘不属于当前活动窗口 代码如下 private View textEntryVie
 自定义了Dialog然后弹出软键盘,但是键盘不属于当前活动窗口 代码如下 private View textEntryVie
 自定义了Dialog然后弹出软键盘,但是键盘不属于当前活动窗口 代码如下 private View textEntryVie
分享几个jquery Dialog弹出窗插件 1)Zebra_Dialog是一个可灵活配置的对话框jQuery插件,大小只有4KB
android 自定义Dialog背景透明及显示位置设置 先贴一下显示效果图,仅作参考: 代码如下: 1、自定
jquery ui 提供了强大的dialog功能,基本能满足开发的功能。 一、先上一个简单的例子: 1、代码如下
初始化参数 对于 dialog 来说,首先需要进行初始化,在调用 dialog 函数的时候,如果没有传递参数,
版权所有 IT知识库 CopyRight © 2009-2015 IT知识库 IT610.com , All Rights Reserved. 京ICP备09083238号