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

Question

我在我的 asp.net View 上使用 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 图像)应用到这些按钮。如何添加按钮并删除在 Jquery ui 对话框按钮上显示为 Ok 和取消的文本

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