如何移动 jQuery UI 对话框上的关闭按钮？

Posted 2023-05-08

【中文标题】如何移动 jQuery UI 对话框上的关闭按钮？

【英文标题】：How do I move the close button on a jQuery UI dialog box?

【发布时间】：2016-04-13 00:36:20

【问题描述】：

我想将 UI 标题栏右上角的关闭按钮从实际标题栏移开。我查看了文档和其他 SO 问题，但找不到解决方案。

以前有没有人这样做过。

n.b.我可以删除标题栏，但也可以删除关闭按钮，同样我可以删除关闭按钮或将其移动到标题栏上的任何位置，但不能远离标题栏。

谢谢

【问题讨论】：

在你的 CSS 中你是否覆盖了 .ui-dialog .ui-dialog-titlebar-close 类？

除了 css 解决方案之外，您还可以使用 append 或类似的其他节点在创建元素后移动元素。你能提供一个具体的用例吗？目前的问题太宽泛，无法正确回答

【参考方案1】：

你可以这样做。

button.ui-dialog-titlebar-close 
  top:60px !important; 
  z-index:99999;

Try it on JSFiddle too

【参考方案2】：

最后，我隐藏了标题栏和关闭按钮并插入了一个关闭对话框的图像:-)

<img src="close-window.png" onclick="$('#dialog-learn').dialog('close');" style="float:right;">