jquery - jquery ui对话框上的自定义图像

Question

我在我的 asp.net 视图上使用 Jquery UI 对话框，如下所示：

$("#dialog-dial-prefix").dialog({
        autoOpen: false,
        modal: true,
        width: 470,
        resizeable: true,
        buttons: {
            "OK": function () {
 $(this).dialog("close");

                                }


                      ,
                       "Cancel": function () {
                           $(this).dialog("close");
                            var selectedDialPrefix = $("#SelecteddialprefixId").val();
                            $("#" + selectedDialPrefix).focus();
                        }
        }
    });

此对话框有两个按钮 Ok 和 Cancel。我想将自定义图像（我有 png 图像）应用到这些按钮。如何添加按钮并删除显示为 Ok 的文本并在 Jquery ui 对话框按钮上取消

Answer 1

您可以通过覆盖按钮的默认 css 来实现此目的

.ui-dialog .ui-dialog-buttonpane button { 
    text-indent: -9999em; /* hides the text */
    color: transparent; /* also hides text */
    background-image: url(/path/to/image.png); /*replaces default image */
    background-repeat: no-repeat;
}

如果要定位特定对话框，请添加对话框的 ID