Question

我有一个jQuery UI对话框，其中包含一个可扩展的表单，具体取决于用户的选择：http://i.imgur.com/KsskHBC.png。

例如，如果用户将“回答类型”更改为数字，则内容将添加到对话框中（或从中移除）：http://i.imgur.com/qH3gmHP.png。

因此，如果用户打开对话框，选择将展开对话框而不移动对话框，对话框将正常调整大小，如上图所示。但是，如果用户拖动对话框然后进行扩展对话框的选择，则不会自动调整大小：http://i.imgur.com/0YEvD5t.png。

这是我初始化对话框的方式：

var dialogToShow = isDeleteConfirmDialog ? $("#confirmDeleteDialog") : $("#customDialog");

dialogToShow.dialog({
    // autoResize: true, -- does not work neither
    resizable: false,
    title: "My title",
    modal: true,
    width: 'auto',
    height: 'auto',
    draggable: false,
    hide: { effect: 'scale', duration: 400 },
    open: function () {
        $('.ui-widget-overlay').bind('click', function () { dialogToShow.dialog('close'); });
    }
});
dialogToShow.parent().draggable();

我也尝试将对话框的位置设置为absolute，但它没有改变任何内容。

我做了一个JSFiddle，看看我是否可以重现我的问题，事实上我能够：https://jsfiddle.net/BishopBarber/61jqhsgt/2/

编辑：这在IE的最新版本中似乎不是问题，因此可能是一个错误

Answer 1

在执行多次测试后，我意识到这是jQuery UI版本1.11.2到1.11.4中发生的错误。后续版本和以前版本似乎没有此问题。如果您不想更改您的版本，Mark Schultheiss建议采用的解决方法。

Answer 2

如果删除动画，然后关闭/打开更改，我相信它会起作用。不理想，但解决这个问题。

注意你可以删除＆＃34;隐藏＆＃34;如果你将它设置为不自动打开，则显示样式。（参见小提琴标记）

重做代码：

$(function() {
  var dialogToShow = $("#customDialog");
  dialogToShow.dialog({
    resizable: false,
    title: "Dialog",
    modal: true,
    width: 'auto',
    height: 'auto',
    draggable: false,
    // hide: {
    //    effect: 'scale',
    //    duration: 400
    //  },
    autoOpen: false
  });
  dialogToShow.parent().draggable();
  $(document).on('click', '.ui-widget-overlay', function() {
    dialogToShow.dialog('close');
  });
  $("#openDialogBtn").on("click", function() {
    dialogToShow.dialog("open");
  });
  $("#questionType").change(function() {
    if ($(this)[0].selectedIndex === 1) {
      $("#controlEditor").html($("#loremIpsum").html());
    } else {
      $("#controlEditor").html("");
    }
    dialogToShow.dialog("close").dialog("open");
  });
});

小提琴更新：https://jsfiddle.net/MarkSchultheiss/61jqhsgt/3/

拖动后，jQuery UI对话框会自动停止调整大小

2 个答案: