當寬度設置爲自動時，對話框的最大寬度不會影響

Question

我試圖讓對話框使用自動寬度和高度，但只能達到一定的寬度。 但maxWidth沒有考慮影響，直到我手動調整打開的對話框。

我怎麼能自動觸發的寬度的支票？

示例代碼：http://jsfiddle.net/yy9Cd/6/

Answer 1

從來沒有用jQuery UI做過很多工作。但是，這裏有一個解決你的問題，顯然我已經設置maxWidth爲50px，所以改變它！

$(document).ready(function(){ 

var myDialog = $("#myDialog").dialog({ 
    autoOpen: false, 
    maxWidth: "50px", 
    height: 'auto', 
}); 

$("#showDialog").click(function(){ 
    myDialog.dialog("open"); 
}); 

}); 

Answer 2

難道你們就不能只是刪除了「寬度」和「高度」屬性？ http://jsfiddle.net/Ve79f/

Answer 3

設置CSS最大寬度屬性將確實確保對話不超過寬度，但隨後出現的對話框行爲異常（溢出是不可靠的，調整大小手柄可以放錯了地方），因爲jQuery對你的設置一無所知。這是我的解決方案：

var maxWidth = 750; 
    var maxHeight = 600; 

    var popup = $("<div>" + content + "</div>") 
     .dialog({ 
      autoOpen: true, 
      title: title, 
      hide: { effect: 'drop', direction: "up" }, 
      height: 'auto', 
      width: 'auto', 
      maxHeight: maxHeight, 
      maxWidth: maxWidth, 
      modal: modal, 
      buttons: { 
       Ok: function() { 
        $(this).dialog("close"); 
       } 
      } 
     }); 

    var w = popup.dialog("widget").width(); 
    console.log("w=",w); 
    if (w > maxWidth) { 
     popup.dialog("option", "width", maxWidth) 
     popup.dialog("widget").width(maxWidth); 
    } 

    var h = popup.dialog("widget").height(); 
    console.log("h=",h); 
    if (h > maxHeight) { 
     popup.dialog("option", "height", maxHeight) 
     popup.dialog("widget").height(maxHeight); 
    } 

    w = popup.dialog("widget").width(); 
    console.log("w2=",w); 
    h = popup.dialog("widget").height(); 
    console.log("h2=",h); 

Answer 4

如果你想要一點「響應」，我建議這樣做。修復對話框的最大和最小尺寸，並根據窗口大小進行調整。

根據您的對話框更改最小值或最大值。根據這些限制，它可以縮放到窗口大小的50％。它的中心。

$(document).ready(function() { 

     var maxWidth = 500; 
     var maxHeight = 300; 
     var minWidth = 250; 
     var minHeight = 180; 

     function diagSize() { 
      var wid = $(window).width() * 0.50; 
      if (wid > maxWidth) { 
       wid = maxWidth; 
      } else if (wid < minWidth) { 
       wid = minWidth 
      } 
      var hei = $(window).height() * 0.50; 
      if (hei > maxHeight) { 
       hei = maxHeight; 
      } else if (hei < minHeight) { 
       hei = minHeight 
      } 
      $("#mydialog").dialog({height: hei, width: wid}); 
      $("#mydialog").dialog("option", "position", {my: "center", at: "center", of: window}); 
     } 

然後你的對話框：

var mydialog = $("#mydialog).dialog({ 
      autoOpen: false, 
      closeOnEscape: true, 
      modal: true, 
      resizable: false, 
      buttons: { 
       "<spring:message code="action.cancel"/>": function() { 
        $(this).dialog("close"); 
       }, 
       "<spring:message code="action.next"/>": function() { 
        $.post({ 
         url: '/myurl', 
         success: function(data) { 

         }, 
        }); 
       } 
      } 
     }); 

最後，調整您的對話框上的2例：調整窗口大小和開業前：

$(window).resize(diagSize); 

$("#btnopenmydialog").on('click', function() { 
    diagSize(); 
    mydialog.dialog("open"); 

閉幕的$（document）。就緒

});