`

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
分享到:
评论

相关推荐

    Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    在Jquery EasyUI框架中,开发人员经常需要创建交互式的用户界面,比如弹出确认对话框和显示加载效果。这两个功能对于提供良好的用户体验至关重要,因为它们可以告知用户系统正在进行的操作并等待用户确认某些操作。 ...

    jquery_easyui_cn 中文例子 和详解

    - 实例:Dialog 是一个浮动窗口,常用于弹出式操作,如提示、确认、编辑等。 - 参数:`title`(对话框标题),`width`/`height`(尺寸),`modal`(是否模态)等。 - 事件:`onOpen`(对话框打开时触发),`...

    unigui_easyui_data

    例如,你可以使用EasyUI的`datagrid`组件来显示和操作表格数据,`dialog`组件来创建弹出窗口,以及`pagination`组件来实现分页功能。 在实际操作中,为了调用EasyUI的组件和方法,你需要在Unigui的`UniHTMLFrame`...

    火狐下easyui1.3.*弹出window框无法定位到中间问题解决

    "火狐下easyui1.3.*弹出window框无法定位到中间问题解决"这个标题揭示了一个特定的技术难题,即使用EasyUI框架在Firefox浏览器下创建的弹窗窗口未能正确地居中显示,而在Internet Explorer和Chrome浏览器中却表现...

    JEECG UI标签库帮助文档

    此示例展示了如何定义一个弹出窗操作标签,点击该按钮时将打开一个编辑信息的弹出窗口。 **2.3.4 询问操作标签** ```xml 请输入备注信息" askFunction="saveNote"/> ``` 此示例展示了如何定义一个询问操作标签,...

Global site tag (gtag.js) - Google Analytics