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文件