jQuery对话框：如何控制按钮窗格的高度

Question

如何在不更改CSS文件的情况下手动调整/设置jQuery对话框中按钮窗格的高度？我想从Javascript调整包含消息的DIV和包含按钮（用绿线标记）的DIV的高度。

function showMessageDialog(title, message, width){ 
    // create div if it doesn't exist already 
    if(!$("#msgDialogDiv").length) { 
     $("<DIV></DIV>").appendTo("body").attr("id","msgDialogDiv"); 
    } 
    // set the message 
    $("#msgDialogDiv").html(message).css("color","red"); 

    // show the dialog 
    $("#msgDialogDiv").dialog({ 
     modal: true, resizable: false, draggable: false, title: title, width: width, 
     buttons: {OK: function(){$(this).dialog("close");}} 
     }); 

     // This changes the height as I want. 
     // $("#msgDialogDiv").css({"overflow":"hidden","height":"10px"}); 
     // this changes the font on button 
     //$("#msgDialogDiv").dialog("widget").find(".ui-button-text").css("font-size", "11px"); 
     return; 
} 

showMessageDialog("Hello Stackoverflow!", "This is my first question on stackoverflow",400); 

虽然张贴这个问题，我试着调整DIV的高度和它的工作。我也试着改变按钮的字体大小，但这只是改变了按钮的大小。我想控制整个DIV的大小。是否由于按钮周围的填充？

Answer 1

自己找到了。这是我正在寻找的。

// set the size of the button 
$("#msgDialogDiv").dialog("widget") 
        .find(".ui-button-text").css("font-size", "10px") 

// this is not required. but doesn't hurt. To hardcode the height, 
// just change to height instead of minHeight 
//$("#msgDialogDiv").css({"minHeight":"10px"}) 

// button pane style 
$("#msgDialogDiv").dialog("widget").find(".ui-dialog-buttonpane") 
        .css({"padding":".1em .1em .1em 0","margin":"0 0 0 0"}) 

// button style 
$("#msgDialogDiv").dialog("widget").find("button") 
        .css({"padding":"0 .2em 0 .2em","margin":"0 .5em 0 0"}) 

Answer 2

只要改变jQueryUI.css文件