Is it possible to add custom css class to the buttons on a jQuery UI Dialog

Question

I am trying to write custom class in dialog box button. I am unable to do do that it is not taking custom css class at all. My code is as follows:

function AddProcedures() { 
    success: function(msg) {
        if (msg.status) {
            $("#modal_Window").dialog({
                title: 'XX',
                buttons: {
                    Close: function() {
                        $(this).dialog('close');
                    }
                },
                open: function() {
                    //debugger;
                    $('.ui-dialog-buttonpane').find('button:contains("Close")').removeClass("ui-button-text-only");
                    $('.ui-dialog-buttonpane').find('button:contains("Close")').removeClass("ui-button-text-only").parent().addClass('ButtonLong');
                    $('.ui-dialog-buttonpane').find('button:contains("Close")').addClass("ButtonLong");
                },
                modal: true
            });
            $("#modal_Window").html('MM');
        }
        error: function(msg) {
            ErrorDialog('@RelatedProcedure.ProcedureTitle', '@RelatedProcedure.Error');
        }
    });
}

I have spent one full day to do it. I may not expert in Jquery. Please help me.

You appear to have an extraneous ) on the second-to-last line. You may want to check that you've posted all the relevant code. — Adrian Wragg
– Adrian Wragg, Commented Jul 5, 2013 at 9:00

Shikiryu · Accepted Answer · 2013-12-05 21:35:13Z

You can try this. It worked for me. I just made four CSS group styles to style the buttons

button[type="button"].ConfirmButton 
button[type="button"].ConfirmButton:hover 
button[type="button"].CancelButton 
button[type="button"].CancelButton:hover

and this is the JavaScript:

var ModalDiv = $(document.createElement("div"));

$(ModalDiv).html('Are you sure you want to delete this note from the request?');

$(ModalDiv).dialog({
    modal: true,
    resizable: false,
    draggable: false,
    closeText: "",
    hide:{
              effect: "fade",
              delay: 0,
              duration: 250,
              easing: 'linear'
          },
    show: {
              effect: "fade",
              delay: 0,
              duration: 250,
              easing: 'linear'
          },
    width: 400,
    title: "Tile of Dialog",
    dialogClass: "ui-dlgconfirmation",
    buttons: [{
                  text: "Delete",
                  class: "ConfirmButton",
                  click: function () {
                      $(this).dialog("close");
                  }
              },
              {

                  text: "Cancel",
                  class: "CancelButton",
                  click: function () {
                      $(this).dialog("close");
                  }
              }]
});

With

Suresh Atta · Accepted Answer · 2013-07-05 08:57:52Z

0

Yes simply while adding button,add the class name

Close   : {

              class: 'yourNewClassname', click: function() {

               //on click

            },

answered Jul 5, 2013 at 8:57

Suresh Atta

122k38 gold badges206 silver badges315 bronze badges

1 Comment

Ujjwal Das Over a year ago

I have tried ur code It is giving MS Visual studio error (80020101) from line (t&&g.test(t)&&(e.execScript||function(t){e.eval.call(e,t)})(t) ) under Jquery-1.8.3.min.js file.

DjimOnDev · Accepted Answer · 2013-07-05 09:12:04Z

0

you can override css styles with jQuery or javascript.

Just try something like this :

$(document).ready(function()
{
    $('theTargetedIdentifier').css({'font-size':14});
});

answered Jul 5, 2013 at 9:12

DjimOnDev

3993 silver badges13 bronze badges

1 Comment

Ujjwal Das Over a year ago

I am using Modal Dialog Box in MVC3 using Jquery.

Gnanz · Accepted Answer · 2013-07-05 09:16:02Z

0

Try to override the css styles by like the css below

#popupid .ui-button-text-only{
 . . . . 
. . .  . .
font-size:14px;
. . . . 
. . .  . .
}

you can use the button id or class for specify conditional css

edited Jul 5, 2013 at 9:16

answered Jul 5, 2013 at 8:59

Gnanz

1,8735 gold badges25 silver badges52 bronze badges

Collectives™ on Stack Overflow

Is it possible to add custom css class to the buttons on a jQuery UI Dialog

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related