CODEWITHSUNDEEP
jquerycssjquery-ui
DotnetSparrow
DotnetSparrow

Reputation: 27996

custom image on jquery ui dialog

I am using Jquery UI Dialog on my asp.net view like this:

$("#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();
                        }
        }
    });

This Dialog has two buttons Ok and Cancel. I want to apply custom images ( which I have as png images) to these buttons. How can I add buttons and remove the text which is appearing as Ok and cancel on Jquery ui dialog buttons

Upvotes: 1

Views: 1878

Answers (1)

Dogoku
Dogoku

Reputation: 4675

you can achieve this by overwriting the default css of the buttons

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

add the dialog's id if you want to target a specific dialog box

Upvotes: 2

Related Questions