Question

有人可以告诉我如何在浏览器调整大小时将其设置为自动中心吗？我知道有很多关于这个问题的回答问题，但我完全是业余爱好者。我需要有人为我重写以下代码。

感谢。

<script type="text/javascript">

    function openDialog(url) {
        $("<div class='popupDialog'>Loading...</div>")
            .dialog({
                autoOpen: true,
                closeOnEscape: true,
                width: '900',
                height: '800',
                modal: true,
                title: 'Bonus Features'
            }).bind('dialogclose', function() {
                jdialog.dialog('destroy');
            }).load(url, function() {
                $(this).dialog("option", "position", ['center', 'center'] );
            });
    }
</script>

Answer 1

您可以添加窗口调整大小事件以将位置重置为center, center

示例：http://jsfiddle.net/pxfunc/byknH/

$(window).resize(function() {
    $('.popupDialog').dialog({position: ['center', 'center']});
});

Answer 2

我对jdialog或你正在使用的任何插件都不是很熟悉，但是，你可以绑定到窗口调整大小事件。

$(window).bind('resize.dialog', function(e) {
  /* resize dialog */
});

如果没有方法来调整“jdialog”的大小，你可以每次关闭并重新打开对话框，但这似乎是不可取的。

Answer 3

我将此添加为您的另一个问题的一部分，但这里又是......

<script type="text/javascript">

    function openDialog(url) {
        $("<div class='popupDialog'>Loading...</div>")
            .dialog({
                autoOpen: true,
                closeOnEscape: true,
                height: '1012',
                modal: true,
                position: ['center', 'center'],
                title: 'About Ricky',
                width: 690
            }).bind('dialogclose', function() {
                jdialog.dialog('destroy');
            }).load(url, function() {
                $(this).dialog("option", "position", ['center', 'center'] );
            });
    }

    // This part does the center on browser resize...
    $(window).resize(function() {
        $(".ui-dialog-content").dialog("option", "position", ['center', 'center']);
    });
</script>

jQuery UI：调整大小时自动居中

3 个答案: