将按钮/HTML内容添加到Kendo对话框标题栏

Question

我想根据给定的设计添加一个按钮，其中一些文本左图左图放在Kendo对话框中的关闭按钮中。

我尝试通过在对话框中添加一个按钮，然后以相对位置移动，按钮移动，但它被隐藏在标题栏下。我已经检查并操纵了关闭按钮和对话框标题的CSS，但在可见标题时看不到按钮。

任何人都可以帮助它如何完成？

我在下面的链接中创建了一个Dojo，您可以检查它。

https://dojo.telerik.com/osotaway

Answer 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;
}

演示链接

Answer 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;

}

在此处检查