jQueryUI 对话框宽度

Posted 2023-03-06

【中文标题】jQueryUI 对话框宽度

【英文标题】：jQueryUI dialog width

【发布时间】：2014-07-13 21:35:46

【问题描述】：

Fiddle Full Screen Example

我使用 jQuery 对话框打开表格。其中一些有大量文本，而且它们往往太长并且远离屏幕。如果表格太长，如小提琴中的第一个，如何使对话框更宽？我试过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;
            
        );
  );
);

【参考方案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"
);

【讨论】：

它应该是 maxWidth: 768，没有引号和“px”。 jQuery 自动假定为 px。