jQueryUI 对话框宽度

Question

Fiddle Full Screen Example

我使用 jQuery 对话框打开表格。其中一些有大量文本，而且它们往往太长并且超出屏幕范围。如果表格像 fiddle 中的第一个一样长，我怎样才能使对话框更宽？我试过 width:'auto' 但它似乎只占据了整个屏幕。

HTML:

<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>
<button class='label'>Click</button><div class='dialog'><p><table>.....</table></div>

Javascript:

$(document).ready(function(){

 $('.label').each(function() {

 var dialogopen = $(this).next(".dialog"); 
 dialogopen.dialog({width:'auto',autoOpen: false,modal: true,
            open: function(){
            jQuery('.ui-widget-overlay').bind('click',function(){
                dialogopen.dialog('close');
            })
        }    
 });    
  $(this).click(function(){
        dialogopen.dialog('open');
         return false;
            }
        );
  });
});

Answer 1

我建议将 width 和 maxWidth 添加到您的对话框选项中。我不知道你的设计是什么样的，但试试这样的东西，例如:

dialogopen.dialog({
   autoOpen: false,
   modal: true,
   open: function(){
      jQuery('.ui-widget-overlay').bind('click',function(){
         dialogopen.dialog('close');
      });
   },
   width: "90%",
   maxWidth: "768px"
});