jQueryUI 对话框宽度

Question

拨弄全屏示例

我使用 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;
            }
        );
  });
});

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"
});

Answer 2

具有响应式宽度和高度的对话，来源

 $(".order-later-button").click(function () {
        var screenWidth, screenHeight, dialogWidth, dialogHeight, isDesktop;    
        screenWidth = window.screen.width;
        screenHeight = window.screen.height;    

        if (screenWidth < 500) {
            dialogWidth = screenWidth * .95;
            dialogHeight = screenHeight * .95;
        } else {
            dialogWidth = 500;
            dialogHeight = 500;
            isDesktop = true;
        }

        $("#dialogOrderLater").dialog({
            title: "Job Close?",
            buttons: {
                "Close": function () {
                    $(this).dialog('close');
                },
                "OK": function () {
                    window.location = YOUR_URL;
                }
            },                        
            draggable: false,
            modal: true,
            height: dialogHeight,
            width: dialogWidth,
            closeOnEscape: false
        });
    });