0

我有几个想要以相同方式运行的对话框。我创建了一个空对话框，根据单击的按钮通过 ajax 加载包含各种内容的对话框，然后打开对话框。打开时我检查窗口高度，如果对话框高度大于窗口高度，我将高度设置为窗口大小减去 20px，否则对话框高度是自动的。我在窗口调整大小事件上运行相同的函数，并将它定位在窗口的中心。当在对话框中单击将数据附加到对话框末尾的某些按钮时，我也会运行该函数。一切都很好，除了它打破了使用拖动手柄手动调整对话框的大小。我正在使用 jQuery 1.9.1 和 jQuery UI 1.9.2。代码基本上是这样的：

    //Create the dialog
    $("div.myDialogContainer").dialog({
      title:"Whatever",
      autoOpen:false,
      modal:true,
      resizable:true,
      width:850,
      open:function(event, ui){$.positionDialog();}
    });

    //Load content and open the dialog
    $("#openButton").on("click", function(){
      $.ajax({url:"myPath", success:function(data){
        $("div.myDialogContainer").html(data).dialog("open");
        $("div.myDialogContainer #addMoreData").on("click", function(){
          $("div.myDialogontainer div.loadedContent").append("<div>More Data</div>");
        });
      }
      });
    });

    //Position the dialog on window resize
    $(window).resize(function(){$.positionDialog();});

    //check dialog height and center on screen
    (function(){$.positionDialog=function(){
      var myDialog = $("div.myDialogContainer:visible"); 
      var availableHeight = $(window).height() - 20;
      var dialogHeight = myDialog.parent().height();
      if(dialogHeight>=availableHeight){
        myDialog.dialog("option", "height", availableHeight );
      }
      else{
        myDialog.dialog("option", "height", "auto" );} 
        myDialog.dialog("option", "position", "center");
      }
    })(jQuery);

我在这里遗漏了什么还是这只是 jQuery/jQuery UI 的错误/限制？

4

0 回答 0