向 kendo 对话框标题栏添加按钮/html 内容答案

【问题标题】：Add a button/html content to kendo dialog title bar向 kendo 对话框标题栏添加按钮/html 内容
【发布时间】：2019-03-01 07:58:35
【问题描述】：

我想根据给定的设计在剑道对话框中的关闭按钮左侧添加一个带有一些文本的按钮。

我尝试在对话框主体中添加一个按钮，然后以相对位置移动它，按钮移动但它被隐藏在标题栏下。我已经检查并操作了关闭按钮和对话框标题的 css，但是当标题可见时无法使按钮可见。

任何人都可以帮助解决它吗？

我在下面的链接中创建了一个道场，你可以查看它。

https://dojo.telerik.com/osotAwAy

【问题讨论】：

在这里包含一些代码。
@AndyHoffman - 我在问题中添加了道场链接dojo.telerik.com/osotAwAy，你检查了吗
好吧，我可以用这个:)

标签： jquery css kendo-ui

【解决方案1】：

这是接近它的安全方法——使标题栏成为一个相对容器并将按钮绝对定位在该相对容器内。

首先，将button 附加到标题栏中。

$(".k-dialog-titlebar").append(
  '<button id="btnMoveMe">Move Me</button>'
)

然后，添加以下CSS：

#btnMoveMe {
  background-color: blue;
  color: white;
  right: 30px;
  top: 12px;
  position: absolute;
}
.k-dialog-titlebar {
  position: relative;
}

Demo link

【讨论】：

【解决方案2】：

将overflow:visible 应用到.k-prompt-container, .k-window-content：

.k-prompt-container, .k-window-content{overflow:visible}

并修改#btnMoveMe类：

#btnMoveMe {
background-color: blue;
color: white;
position: absolute;
right: 30px;
top: -41px;

}

Check here

【讨论】：

谢谢，这正是我想要的，但我选择了@andy 的解决方案，以便更好地将按钮附加到标题栏