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

我的代码在下面。我需要在ok中更改按钮大小并在按钮中取消。如何在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>

感谢

来源

2011-03-22 Renukshan Saputhanthri

你需要什么到c把它交给？另外，为什么不只是编辑对应于这两个元素的CSS？ – Jakub 2011-03-22 03:47:00

我需要更改按钮大小？ – 2011-03-22 04:03:46

我想让它更小 – 2011-03-22 04:04:18

你可以用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）t o避免搞乱你使用的任何其他jQuery-UI按钮。如果你想让所有的按钮变小，那么把这些变化应用到你的jQuery-UI主题CSS。

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

来源

2011-03-22 05:34:24

这对我有用。谢谢！ – 2012-08-08 13:33:49

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

尝试使用 CSS该即时通讯：平滑/ jQuery的UI-1.8.9.custom.css JS：jQuery的1.4.4.min.js和jQuery-UI-1.8.9.custom。 min.js

来源

2011-03-22 06:00:09 jaychapani

谢谢Guys.I得到它的工作。:-) – 2011-03-22 07:31:05

您可以在这个例子中设置按钮的宽度，如：

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

来源

2012-10-29 18:52:13

我认为这是最好的解决方案，如果我们希望特定对话框中的所有按钮具有相同的宽度，但不能覆盖所有对话框的css。谢谢！ – 2014-07-29 07:46:20

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

这个工作对我来说

来源

2016-05-16 09:30:25 BEDI

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

回答

相关问题