Question

我的代码在下面。我需要在ok中更改按钮大小并在按钮中取消。

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

由于

Answer 1

你可以用一点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选择器中的#dialog），以避免弄乱您正在使用的任何其他jQuery-UI按钮。如果要将所有按钮缩小，请将更改应用于jQuery-UI主题CSS。

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

Answer 2

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

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

Answer 3

<style type="text/css">
    .ui-widget, .ui-widget button {
        font-family: Verdana,Arial,sans-serif;
        font-size: 0.8em;
    }
    </style>

尝试使用此功能 CSS：smoothness / jquery-ui-1.8.9.custom.css JS：jquery-1.4.4.min.js和jquery-ui-1.8.9.custom.min.js

Answer 4

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

这对我有用

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

4 个答案: