如何在Bootstrap对话框底部添加标签

Question

需要在 bootstrap3-dialog 的页脚上添加 bootstrap 标签。根据这个教程，只能在页脚区域添加按钮。

BootstrapDialog.show({
    title: 'Default Title',
    message: 'Click buttons below.',
    buttons: [{label: 'Title 1'}, {label: 'Title 2'}]
});

- Geeth Welagedara

Answer 1

如果页脚没有任何按钮，将默认隐藏（使用style="display:none;"）。 我可以通过以下方式将自定义HTML添加到页脚：

BootstrapDialog.show({
  title: 'Default Title',
  message: 'Custom Footer',
  onshow: function(dialogRef) {
    dialogRef.getModalFooter()
      .css({display:'inline'})
      .find('.bootstrap-dialog-footer')
      .append('<span>Anything</span>');
   }
});

这只是一个非常基础的例子，我们需要进一步扩展这个想法。

- aesede

Answer 2

如果您熟悉CSS，我认为您可以通过CSS来实现这一点，目的是始终保持按钮但具有“标签”样式，类似于以下内容：

1. 为每个要添加“标签”的css类：

BootstrapDialog.show({ title: '默认标题', message: '单击下面的按钮。', buttons: [{ label: '标题1', cssClass: 'buttonAsLabel1' }, { label: '标题2', cssClass: 'buttonAsLabel2' }] });

2. 声明与相关的Bootstrap标签相同的Css类。应该可以工作^^

- David H.