在对话框标题栏中的“关闭”按钮旁边添加按钮

Adding buttons next to the Close button in dialog title bar

本文关键字：按钮 添加 关闭 对话框 标题栏      更新时间：2023-09-26

我在对话框中添加了两个自定义按钮，但它们目前只是在中间。如何在标题栏上移动关闭按钮旁边的这些按钮，而不覆盖或触摸关闭按钮，也不使用任何CSS？

我的小提琴：http://jsfiddle.net/ZSk6L/928/

如果您可以在jQuery中使用css，那么您可以在减号按钮中添加一个类：

$('<button class="minusButton">-</button>').appendTo(titlebar).click(function() {
    $('#resultId').parents('.ui-dialog').animate({
        height: '40px',
        top: $(window).height() - 90
    }, 50);
});

然后设置保证金

$(".minusButton").css("margin-left", "105px");

如果你很乐意在jquery中使用内联样式，这会得到你想要的（没有浮动或覆盖关闭按钮-只需为第一个自定义按钮设置一个左边距：

$('<button>-</button>').appendTo(titlebar).css('margin-left', '35%').click(function() {

Fiddle

如果不使用通过jQuery编写的内联CSS，就绝对无法做到这一点。

你最好的选择是在+按钮上使用浮动和固定的小边距，这样它就不会与收盘按钮重叠。请注意，当用户大量调整对话框窗口的大小时，此处编写的任何答案都可能会出现问题，而防止这种情况的唯一方法是为整个对话框窗口提供min-width属性。

以下是您应该做的：

$('<button>+</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right', 'margin-right': '10px'}).click...

对于另一个按钮：

$('<button>-</button>').appendTo(titlebar).css({'display':'inline-block', 'float':'right'}).click...

您可以看到正在工作的Fiddle Here

相关文章：