jQuery UI 对话框移除外部发光并更改关闭按钮的文本

Question

I'm trying to customize my jQuery UI confirm dialog window. Can't find how I can remove light blue outer glow from buttons (on hover), change close text button from "close" to "x" and remove close button hover background. Is there some documentation about all dialog classes somewhere?

This is the code:

function fnComfirm(title, content, btnId) {
    $("#dialog:ui-dialog").dialog("destroy");
    $("#dialog-confirm p").text(content);
    $("#dialog-confirm").dialog({
        title: title,
        resizable: false,
        height: 200,
        width: 486,
        modal: true,
        buttons: {
            "OK": function() {
                $( this ).dialog("close");
                if (btnId) document.getElementById(btnId).click();                  
                return true;        
            },
            Cancel: function() {
                $( this ).dialog("close");
                return false;
            }
        }
    });
    $('body').css('overflow','hidden');
    $("div[role=dialog] button:contains('Cancel')").css("background-image", "none").css("border", "0px solid #FFF");
    $('.ui-dialog :button').blur();     
}

HTML:

<div id="dialog-confirm" title="Are you sure?"><p></p></div>

include:

<h:outputScript library="js" name="jquery-ui-1.8.min.js" />

Answer 1

For changing the close button text, you can pass in an option like title (in the dialog creation), called closeText.

$("#dialog-confirm").dialog({
    title: title,
    closeText : 'hello' //Changes the text of the titlebar-close button to hello instead of default Close
    ...
    ...
})

And to remove the outerglow(focus) from the close button, you can go into the css for the titlebar-close and mark outline property to be zero as follows:

.ui-dialog .ui-dialog-titlebar-close {
   outline: 0;
 }

Answer 2

Div.dialog({ autoOpen: true, closeOnEscape: false, closeText: '', modal: true, draggable: false, resizable: false, width: 640, height: 420, close: function(event, ui) { if (orderModifyFlag == true) { messageDisplay(1000); } else { messageDisplay(651); } } });