首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在调整浏览器大小时自动居中jQuery UI对话框?

如何在调整浏览器大小时自动居中jQuery UI对话框?
EN

Stack Overflow用户
提问于 2010-06-17 16:44:31
回答 4查看 68K关注 0票数 101

当您使用jquery UI对话框时,除了一件事之外,所有的都工作得很好。当浏览器调整大小时,对话框只停留在初始位置,这真的很烦人。

你可以在http://jqueryui.com/demos/dialog/上测试它。

单击“模式对话框”示例并调整浏览器的大小。

我希望能够在浏览器调整大小时让对话框自动居中。我的应用程序中的所有对话框都可以以一种有效的方式完成吗?

EN

回答 4

Stack Overflow用户

发布于 2013-06-17 17:57:28

与Ellesedil的答案不同,

这个解决方案对我来说不是直接有效的,所以我做了以下也是动态的但简短的版本:

代码语言:javascript
复制
$( window ).resize(function() {
    $(".ui-dialog-content:visible").each(function () {
        $( this ).dialog("option","position",$(this).dialog("option","position"));
    });
});

Ellesedil的+1

编辑:

短得多的版本,适用于单个对话框:

代码语言:javascript
复制
$(window).resize(function(){
    $(".ui-dialog-content").dialog("option","position","center");
});

如果您有一些不想接触的独特对话框,则不需要使用.each()。

票数 22
EN

Stack Overflow用户

发布于 2013-01-03 04:46:58

更全面的答案可以在here找到,它以更灵活的方式使用了尼克的答案。

下面是来自该线程的相关代码的改编。这个扩展实际上创建了一个名为autoReposition的新对话框设置,它接受true或false。编写的代码将该选项默认设置为true。将其放入项目的.js文件中,以便您的页面可以利用它。

代码语言:javascript
复制
    $.ui.dialog.prototype.options.autoReposition = true;
    $(window).resize(function () {
        $(".ui-dialog-content:visible").each(function () {
            if ($(this).dialog('option', 'autoReposition')) {
                $(this).dialog('option', 'position', $(this).dialog('option', 'position'));
            }
        });
    });

这允许您在页面上创建对话框时为此新设置提供"true“或"false”。

代码语言:javascript
复制
$(function() {
    $('#divModalDialog').dialog({
        autoOpen: false,
        modal: true,
        draggable: false,
        resizable: false,
        width: 435,
        height: 200,
        dialogClass: "loadingDialog",
        autoReposition: true,    //This is the new autoReposition setting
        buttons: {
            "Ok": function() {
                $(this).dialog("close");
            }
        }
    });
});

现在,此对话框将始终重新定位自身。AutoReposition (或您对该设置的任何称呼)可以处理任何没有默认位置的对话框,并在调整窗口大小时自动重新定位它们。因为您是在创建对话框时设置的,所以您不需要以某种方式标识一个对话框,因为重新定位功能已内置到对话框本身中。最好的部分是,因为这是为每个对话框设置的,所以您可以让一些对话框重新定位,而另一些对话框则保持不变。

向jQuery论坛上的用户scott.gonzalez致谢,以获得完整的解决方案。

票数 13
EN

Stack Overflow用户

发布于 2016-10-18 19:00:40

可替换地,可以使用jQuery ui position

代码语言:javascript
复制
$(window).resize(function ()
{
    $(".ui-dialog").position({
        my: "center", at: "center", of: window
    });
});
票数 3
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/3060146

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档