jquery - 响应式 jQuery UI 对话框(以及 maxWidth 错误的修复)

Question

许多网站都在利用 jQuery UI，但有一些必须克服的主要缺点，因为 jQuery UI 不支持响应式设计，并且当 maxWidth 与 结合使用时存在一个长期存在的错误宽度:'自动'。

所以问题仍然存在，如何使 jQuery UI 对话框具有响应性？

Answer 1

下面是我如何实现响应式 jQuery UI 对话框。

为此，我在配置中添加了一个新选项 - fluid: true，表示要使对话框响应。

然后我捕获调整大小和对话框打开事件，动态更改对话框的最大宽度，并重新定位对话框。

您可以在此处查看实际效果:http://codepen.io/jasonday/pen/amlqz

请查看并发布任何修改或改进。

// Demo: http://codepen.io/jasonday/pen/amlqz
// movemaine@gmail.com

$("#content").dialog({
    width: 'auto', // overcomes width:'auto' and maxWidth bug
    maxWidth: 600,
    height: 'auto',
    modal: true,
    fluid: true, //new option
    resizable: false
});


// on window resize run function
$(window).resize(function () {
    fluidDialog();
});

// catch dialog if opened within a viewport smaller than the dialog width
$(document).on("dialogopen", ".ui-dialog", function (event, ui) {
    fluidDialog();
});

function fluidDialog() {
    var $visible = $(".ui-dialog:visible");
    // each open dialog
    $visible.each(function () {
        var $this = $(this);
        var dialog = $this.find(".ui-dialog-content").data("ui-dialog");
        // if fluid option == true
        if (dialog.options.fluid) {
            var wWidth = $(window).width();
            // check window width against dialog width
            if (wWidth < (parseInt(dialog.options.maxWidth) + 50))  {
                // keep dialog from filling entire screen
                $this.css("max-width", "90%");
            } else {
                // fix maxWidth bug
                $this.css("max-width", dialog.options.maxWidth + "px");
            }
            //reposition dialog
            dialog.option("position", dialog.options.position);
        }
    });

}

编辑

更新方法: https://github.com/jasonday/jQuery-UI-Dialog-extended

上面的存储库还包括以下选项:

• 点击对话框外部关闭
• 隐藏标题栏
• 隐藏关闭按钮
• 有响应(针对上述地址)
• 响应式缩放宽度和高度(例如:窗口宽度的 80%)