如何在Jquery Ui确认对话框中更改按钮大小？

我的代码如下。我需要在“确定”和“取消”按钮中更改按钮大小

<div style="font-size: medium" id="dialog" title="Confirmation Required">
  Story Will Be Deleted??
</div>

<script type="text/javascript">
  $(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      width:300,
      hight:400,
      fontSize:10,
      modal: true
    });
  });

  $(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");
      // $dialog.attr('font-size', '8px');

    $("#dialog").dialog({
      buttons : {

        "OK" : function() {

          window.location.href = targetUrl;
        },
        "Cancel" : function() {
          $(this).dialog("close");
        }
      }
    });

    $("#dialog").dialog("open");
  });
</script>

故事将被删除？？
$（文档）.ready（函数（）{
$（“#对话框”）。对话框({
自动打开：错误，
宽度：300，
身高：400，
尺寸：10，
莫代尔：对
});
});
$（“.confirmLink”）。单击（函数（e）{
e、 预防默认值（）；
var targetUrl=$（this.attr（“href”）；
//$dialog.attr（'font-size'，'8px'）；
$（“#对话框”）。对话框({
按钮：{
“OK”：函数（）{
window.location.href=targetUrl；
},
“取消”：函数（）{
$（此）.dialog（“关闭”）；
}
}
});
$（“对话框”）。对话框（“打开”）；
});

---

谢谢

您可以使用一点CSS来实现这一点，只需减小字体大小：

#dialog .ui-button-text {
    font-size: 10px; /* Or whatever smaller value works for you. */
}

您还可以删除填充：

#dialog .ui-button-text {
    font-size: 10px;
    padding: 1px 1px 1px 1px; /* Or whatever makes it small enough. */
}

这些调整特定于您的对话框（因此CSS选择器中的

#对话框

），以避免弄乱您正在使用的任何其他jQuery UI按钮。如果希望缩小所有按钮，则将更改应用于jQueryUI主题CSS

确定要调整哪些类的最简单方法是使用DOM检查器（Firebug有一个，WebKit有一个更好的（IMHO）。

.ui小部件、.ui小部件按钮{
字体系列：Verdana、Arial、无衬线字体；
字号：0.8em；
}

试试我用的这个 CSS:smoothness/jquery-ui-1.8.9.custom.CSS

---

JS:jquery-1.4.4.min.JS和jquery-ui-1.8.9.custom.min.JS

您可以设置按钮宽度，如下示例所示：

$('#MyDialog').dialog("option", "buttons", [

    {
        text: "Reset",
        width: "100",
        click: function () { Reset(className); }
    },

    {
        text: "Save",
        width: "100",
        click: function () { Update(className); }
    },
    {
        text: "Cancel",
        width: "100",
        click: function () { Close(); }
    }
]);

---

这对我很有用

您需要将其更改为什么？还有，为什么不编辑与这两个元素对应的CSS呢？我需要更改按钮大小？？？您使用的是哪种JS？请您也提供HTML代码，还是将代码粘贴到

jsfiddle.net

我认为如果我们希望特定对话框中的所有按钮具有相同的宽度，但不覆盖所有对话框的css，这是最好的解决方案。非常感谢。

$('#MyDialog').dialog("option", "buttons", [

    {
        text: "Reset",
        width: "100",
        click: function () { Reset(className); }
    },

    {
        text: "Save",
        width: "100",
        click: function () { Update(className); }
    },
    {
        text: "Cancel",
        width: "100",
        click: function () { Close(); }
    }
]);

.ui-button .ui-button-text{
     font-size: 12px;
}