`
bsr1983
  • 浏览: 1117525 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

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

 
阅读更多

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 添加最大最小化按钮控制

    在IT领域,jQuery UI是一个非常流行的前端开发库,它提供了许多可交互的用户界面组件,如Dialog(对话框)就是其中之一。"jquery ui Dialog 添加最大最小化按钮控制"的主题涉及如何扩展jQuery UI Dialog的功能,使其...

    jquery ui中的dialog

    在这些元素中,Dialog是创建弹出式窗口或模拟对话框的常用工具,广泛应用于网页中的提示、确认和设置等场景。 Dialog组件允许开发者将任何HTML元素转化为一个具有关闭按钮、标题、拖动功能和可调整大小的交互式窗口...

    jquery ui dialog 扩展

    在前端开发中,jQuery UI Dialog是一个非常实用的组件,它提供了弹出对话框的功能,可以用于警告、确认、信息提示等场景。这篇内容将深入探讨jQuery UI Dialog的扩展,包括如何自定义行为、增强功能以及与其他技术...

    jquery-ui-dialog-demo

    `jquery-ui-dialog-demo` 是一个基于 jQuery UI 库的弹出窗口插件示例,它提供了丰富的交互式对话框功能,包括模拟原生 JavaScript 的 `alert` 和 `confirm` 对话框以及自定义的打开(open)模式。这个插件使得在...

    jQuery UI Frame Dialog官方修正版(官方1.1.2版本上面有问题)

    jQuery UI Frame Dialog是一款基于jQuery UI库的对话框插件,用于在网页中创建具有框架效果的弹出对话框。在官方1.1.2版本中,存在一个CSS加载问题,导致对话框的样式可能无法正常显示,影响了用户体验。这个问题在...

    jquery dialog弹出层

    标题中的“jquery dialog弹出层”指的是jQuery UI中的Dialog组件。这个组件允许开发者在网页上创建一个浮动的、可定制的窗口,可以模拟传统的对话框效果,如警告、询问或信息提示。Dialog通常会遮盖住页面的其他部分...

    jQuery Dialog 弹出层对话框插件(可加载url地址)

    **jQuery Dialog弹出层对话框插件:深入解析与应用** jQuery Dialog是jQuery UI库中的一个组件,它提供了一种优雅的方式在网页上创建交互式的弹出层对话框。这个插件不仅允许用户展示信息,还可以加载外部URL内容,...

    Jquery UI dialog 详解 (弹出层)

    Jquery UI Dialog 是 jQuery UI 库中的一个重要组件,它提供了一个简洁而强大的界面来创建对话框或者弹出层。通过简单的配置和使用,开发人员可以轻松地集成各种交互式的弹出窗口到他们的网站或应用中。本文档将详细...

    JQuery UI 中文帮助文档

    - **DIALOG(对话框)**: 用于创建弹出式窗口,如警告、确认或自定义信息展示,支持拖动、最大化、最小化等操作,提供多种样式和配置选项。 - **SLIDERS(滑块)**: 可用于创建数值选择器或者进度条,用户可以通过...

    jQuery UI弹出层应用实例

    1. **jQuery UI 弹出层**: jQuery UI 提供了一个名为 Dialog 的组件,可以方便地创建具有多种功能的弹出窗口,如警告、确认、信息提示或自定义内容的对话框。Dialog 可以设置为模态或非模态,具有可调整大小、拖动、...

    jquery Dialog 弹出框 很漂亮 实用

    jQuery Dialog 是一个功能强大的弹出框插件,它是 jQuery UI 库的一部分,广泛应用于网页交互设计中,提供美观且可自定义的对话框效果。在实际项目中,它以其高效和易用性受到开发者的喜爱。 Dialog 弹出框的核心...

    jQuery对话框Dialog弹出层插件演示与使用说明

    jQuery Dialog 是一个强大的弹出层插件,常用于创建各种对话框、提示窗口或模态框,极大地丰富了网页的交互体验。这个插件是基于 jQuery 库构建的,因此在使用前确保已经引入了 jQuery。下面将详细介绍如何使用 ...

    jquery弹出框插件jquery.ui.dialog用法分析

    jQuery UI Dialog是一款功能强大的弹出框插件,它提供了丰富的自定义选项,使用户能够轻松创建各种类型的对话框,包括模态窗口、提示框、确认框等。在本文中,我们将深入探讨jQuery UI Dialog的用法和应用场景。 1....

    jQuery_UI全教程之一(dialog的使用教程).

    jQuery UI 是一个强大的JavaScript库...总的来说,jQuery UI的dialog组件提供了一种灵活、易于集成的方式来创建交互式的弹出对话框。通过调整选项和方法,你可以轻松定制对话框的外观和行为,以适应各种网页应用场景。

    jquery.ui.dialog修改版,支持closable

    Dialog组件可以用来创建模态或非模态的弹出窗口,常用于显示警告、确认、信息或者作为内容的容器。在实际应用中,我们可能需要对Dialog进行自定义,比如控制关闭按钮的显示与否以及禁用ESC键关闭功能。本文将详细...

    formValidator代码生成器+jQuery+formValidator+jquery.ui.dialog

    例如,当用户在表单中输入数据时,`formValidator`会实时验证输入,如果发现错误,可以通过`jquery.ui.dialog`弹出一个警告对话框,清晰地告知用户错误信息。同时,通过jQuery处理用户触发的事件,如点击“提交”...

    jquery_dialog jquery_dialog jquery_dialog

    它基于jQuery框架,提供了丰富的功能和灵活的定制选项,使得开发者能够轻松地在网页上实现弹出式窗口、警告提示、确认对话框等交互效果。本文将对jQuery Dialog进行深入探讨,并结合实践应用,帮助读者掌握其核心...

    jquery dialog css3弹出对话框插件实例

    在网页开发中,jQuery Dialog是一种常用的交互元素,它允许开发者创建功能丰富的弹出对话框,以展示信息、警告、确认或进行用户输入。这个“jquery dialog css3弹出对话框插件实例”提供了使用jQuery UI库和CSS3技术...

    Jsp页面使用jquery ui制作弹出层的详细方法

    首先,我们需要理解jQuery UI的核心组件——Modal Dialog(模态对话框),它是jQuery UI中的一个强大工具,可以创建一个阻塞用户界面的弹出窗口,直到用户与对话框交互后才会解除阻塞。这在需要用户确认操作、输入...

Global site tag (gtag.js) - Google Analytics