Question

我正在尝试自定义我的jQuery UI确认对话框窗口。找不到如何从按钮上移除浅蓝色外部发光（在悬停时），将关闭文本按钮从“关闭”更改为“x”并删除关闭按钮悬停背景。是否有某些关于所有对话类的文档？

这是代码：

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>

包括：

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

Answer 1

要更改关闭按钮文本，您可以传入一个名为title（在对话框创建中）的选项，名为closeText。

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

要从关闭按钮中移除外部光（焦点），您可以进入标题栏关闭的css并将标题轮廓属性标记为零，如下所示：

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

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

2 个答案: