向对话框按钮添加类似样式的选项

Question

正如我在之前的帖子中所说，我是一个 JavaScript 新手，现在学习了一些 JQuery。

简报：

我需要创建一个对话框，当有人点击取消时触发，并且具有（作为文本或值）“确定要退出吗？”，带有两个按钮：“是，我想离开”和“不，我想留在这个页面上 em>”。 “我想离开”按钮的重定向部分稍后会弄清楚。

问题：我想通过 width 选项将按钮设置为 autoSizable（换句话说，width:auto 和 height: (number)px，但我不能想办法：/

这是我的代码 ->

 $(document).ready (function(){
    var $dialog = $('<div></div>');
    $(".selector").dialog({ modal:true });
    var $popUp = $('#btnCancel').one('click', function () {
        $dialog
        .html('All changes will not be saved')
        .dialog({
            title: 'Are you sure you want to exit?',
            resizable: false,
            modal: true,
            closeOnEscape: true,
            buttons: {

                "Yes, I want to leave": function() {
                $( this ).dialog( "close" );
                },
                "No, I want to stay on this page": function() {
                $( this ).dialog( "close" );
                }
            }
        });
    });
    $popUp.click(function () {
        $dialog.dialog('open');
        return false;
    });
});

我尝试更改这段代码的按钮部分 ->

    buttons: [
       { text: "Exit", 'class':'exit-button', resizable: true, click: function () { $(this).dialog("close"); } },
       { text: "Go back", 'class': 'go-back-button', resizable: true, click: function () { $(this).dialog("close"); } }
    ]

但在最后一种情况下，它创建了两个按钮，其值为“0”和“1”，并且没有 onclick 事件。

我该怎么办？

Answer 1

如果在创建按钮时为按钮指定 id，则可以使用 CSS 设置它们的样式，包括为它们指定 height 和 width。

示例 - http://jsfiddle.net/tj_vantoll/ckhG6/2/