`

Jquery easyui 弹出窗口居中显示

阅读更多

   在用easyui+iframe创建新窗口的时候,窗口不能居中显示,在网上找了N久,终于找到方法。

   以下为个人封装的创建dialog的js 通用方法

  

   function openDialog(options) {
    if (options.windowObj) {
        $windowObj = null;
        $windowObj = options.windowObj;
    }
    if (!options.id) {
        options.id = "dialogContainer";
    }
    dialogId = options.id;
    if (!options.title) {
        options.title = "操作面板";
    }
    if (!options.buttons) {
        options.buttons = '#dlg-buttons';
    } else if (options.buttons == "closed") {
        options.buttons = "";
    }
    if (!options.iconCls) {
        options.iconCls = 'icon-cc';
    }
    if (!options.width) {
        options.width = 820;
    }
    if (!options.height) {
        options.height = 500;
    }
    if (!options.maximizable) {
        options.maximizable = false;
    }
    if (!options.draggable) {
        options.draggable = true;
    }
    $("#" + options.id + "Frame").attr("src", options.url);
    $("#" + options.id).dialog({
        "iconCls" : options.iconCls,
        "title" : options.title,
        "width" : options.width,
        "height" : options.height,
        "maximizable" : options.maximizable,
        draggable : options.draggable,
        buttons : options.buttons
    }).dialog("open");
    var top=(screen.height-options.height)/2-30 ;  
    var left=(screen.width-options.width)/2;
    $("#" + options.id).panel("move",{left:left,top:top});
}

   其中:

   //screen为电脑的分辨率

   var top=(screen.height-options.height)/2-30 ;  
    var left=(screen.width-options.width)/2;
    $("#" + options.id).panel("move",{left:left,top:top});

    以上三行根据窗体跟屏幕大小计算top跟left,并用panel的move方法调整left和top属性。

    在调用的时候可以为

   openDialog({
        windowObj : window,
        url : url,
        title : "导入用户",
        buttons : false,
        width : 600,
        height: 400   
        });

 

1
0
分享到:
评论

相关推荐

    IE6下 Jquery EasyUI 弹出窗口层无法挡住select 组件 解决方案

    本文将详细探讨一个特定的问题,即在Internet Explorer 6(IE6)环境下,使用JQuery EasyUI时,弹出窗口(对话框)无法正确遮挡页面上的select组件,以及如何解决这一问题。 JQuery EasyUI是一个基于jQuery的UI库,...

    jquery easyui datagrid demo

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它封装了一系列的 jQuery 插件,为开发者提供了构建用户界面的简便方法。这个“jquery easyui datagrid demo”包含了一些关于如何使用 jQuery EasyUI 中 Datagrid 组件...

    jqueryEasyUI

    - **窗口(Window)**:提供弹出式或浮动式的对话框,用于展示独立的内容或操作。 - **表格(Grid)**:数据展示的主要工具,支持分页、排序、过滤和编辑等功能。 - **表单(Form)**:用于收集用户输入,支持多种...

    jquery easyui 帮助文档

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它简化了网页用户界面开发,提供了丰富的组件和功能。...通过深入阅读和实践“jQuery EasyUI 帮助文档”,开发者可以更好地掌握这个框架,创建出高效、美观的Web应用。

    jQuery EasyUI的api

    理解并熟练运用这些知识点,开发者就能有效地利用jQuery EasyUI创建出高效、美观且功能丰富的Web应用程序。在实际开发中,不断查阅API文档和实践操作,将有助于加深对EasyUI的理解并提高开发效率。

    初试JqueryEasyUI(附Demo)

    jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速构建出美观且功能丰富的 Web 应用程序。这个初试 Jquery EasyUI 的 Demo 旨在帮助新手逐步理解和应用这个强大的工具。 ...

    Jquery EasyUI 日历Demo

    然后,为了展示日历功能,我们需要创建一个 input 元素,用于触发日历的弹出。我们可以设置它的 `class` 为 "easyui-datebox",这样当点击这个输入框时,EasyUI 将自动为其附加一个日历组件: ```html ...

    jQuery EasyUI 1.9.4 chm文档

    针对jQuery EasyUI的1.9.0的在线帮助文档进行整理,生成chm文件,便于开发时或者离线对easyi控件的属性、文法、事件等内容的查看。

    jQuery EasyUI v1.3.5官方API中文版

    jQuery EasyUI 是一款非常棒的WEB前端UI框架,很多朋友都在找jQuery EasyUI API 中文文档,本次给大家提供的就是jQuery EasyUI v1.3.5官方API中文版,有需要的拿去用吧

    jQuery EasyUI 1.5.1 版 API 中文版

    3. **API 参考**:文档中包含了一个完整的 API 参考,列出了所有可用的 jQuery EasyUI 函数、方法和属性。开发者可以通过查阅这个部分来了解如何操作和定制组件,比如改变组件的属性、触发或响应特定事件等。 4. **...

    ssm+jqueryeasyui案例

    例如,使用datagrid可以轻松地展示和操作数据库中的数据,dialog则能创建弹出式窗口,form可以处理用户输入并进行验证。 案例部分通常会包含具体的实现代码,例如Controller层的处理方法、Service层的业务逻辑、...

    jQuery EasyUI 参考资源合集

    首先,`jQuery EasyUI1.2 API文档.CHM` 是一个帮助文件,它详细列出了 jQuery EasyUI 1.2 版本的所有 API 和方法。CHM 文件是一种常见的 Windows 帮助文档格式,里面包含索引、搜索功能,方便用户查找和理解各种组件...

    jQuery easyui 全套文件

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,它简化了网页界面的构建,提供了一系列易于使用的组件和插件,使得开发者能够快速构建出美观、功能丰富的用户界面。这个压缩包包含的是 jQuery EasyUI 的全套文件...

    jQuery EasyUI中文手册

    2. **组件使用**:详细介绍了每个组件的用法,如`<datagrid>`用于展示数据表格,`<window>`用于弹出窗口,`<layout>`用于页面布局,`<form>`用于创建表单等。每个组件都包含属性、方法和事件,学习如何配置这些参数...

    jQuery EasyUI v1.10.0.zip

    jQuery EasyUI 是一个基于 jQuery 的前端开发框架,用于快速构建用户界面。v1.10.0 是这个框架的一个特定版本,包含了一系列组件和功能,适用于网页应用的开发。在这个zip压缩包中,我们可以找到一系列文件,每个都...

    SSH+Jquery easyUI后台管理系统

    SSH+jQuery EasyUI后台管理系统是一种基于Struts2(S)、Spring(S)和Hibernate(H)三大开源框架的Web应用程序开发模式,结合jQuery EasyUI前端框架,构建出高效、简洁且具有现代感的后台管理界面。这个系统设计的...

    Jqueryeasyui使用说明

    jQuery EasyUI是一组基于jQuery的UI插件集合体,而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript,也不需要对c 资源太大,传百度网盘了,...

    jquery easyui + Ztree +折线图

    在实际项目中,jQuery EasyUI、ZTree和折线图的组合可以创建出复杂的管理界面。比如,你可以用ZTree展示组织架构或文件系统,通过点击节点触发异步加载子节点,同时结合EasyUI的表格组件展示详细信息;而折线图则...

    jQuery EasyUI EasyUI 组件范例

    根据提供的文件信息,本文将详细解释与“jQuery EasyUI”相关的知识,特别是“EasyLoader”组件的使用方法及其在实际项目中的应用场景。 ### jQuery EasyUI简介 jQuery EasyUI 是一个基于 jQuery 的用户界面插件...

    jquery easyUi使用文档pdf 和 word版本

    **jQuery EasyUI 使用文档** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列轻量级、易用的组件,帮助开发者快速构建用户界面。这个框架以数据驱动和声明式配置为特点,使得网页开发更加高效。在提供...

Global site tag (gtag.js) - Google Analytics