是否可以将自定义 css 类添加到 jQuery UI 对话框上的按钮答案

【问题标题】：Is it possible to add custom css class to the buttons on a jQuery UI Dialog是否可以将自定义 css 类添加到 jQuery UI 对话框上的按钮
【发布时间】：2013-07-03 07:42:47
【问题描述】：

我正在尝试在对话框按钮中编写自定义类。我无法做到它根本不采用自定义 css 类。我的代码如下：

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

我花了一整天的时间来做这件事。我可能不是 Jquery 专家。请帮帮我。

【问题讨论】：

请发布 html css 或创建小提琴并给我链接
倒数第二行您似乎有一个多余的 ) 。您可能需要检查是否已发布所有相关代码。

标签： jquery css class button

【解决方案1】：

你可以试试这个。它对我有用。我刚刚制作了四个 CSS 组样式来设置按钮样式

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

这是 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

【讨论】：

【解决方案2】：

是的，只需在添加按钮时，添加类名

Close   : {

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

               //on click

            },

【讨论】：

我已经尝试过你的代码它从行 (t&&g.test(t)&&(e.execScript||function(t){e.eval.call( e,t)})(t) ) 在 Jquery-1.8.3.min.js 文件下。

【解决方案3】：

您可以使用 jQuery 或 javascript 覆盖 css 样式。

试试这样的：

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

【讨论】：

我正在使用 Jquery 在 MVC3 中使用模态对话框。

【解决方案4】：

尝试通过像下面的 css 覆盖 css 样式

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

您可以使用按钮 id 或类来指定条件 css

【讨论】：