许多网站利用jQuery UI，有一些主要的缺点，必须克服，因为jQuery UI不支持响应式设计，并有一个长期的错误，当maxWidth与width：’auto’结合使用。
所以问题仍然存在，如何使jQuery UI Dialog响应？
解决方法
下面是我如何实现响应jQuery UI对话框。
为此，我添加了一个新的选项到配置 – 流体：真，这说明使对话框响应。
然后我捕获调整大小和对话框打开事件，即时更改对话框的最大宽度，并重新定位对话框。
你可以在这里看到它在行动：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
上面的存储库还包括以下选项：
