如何将对话框上的jQueryUI关闭按钮移动到右上角？

Question

我正在使用 jQueryUI 并且有一个模态对话框设置。设计师希望关闭按钮看起来像这样：

我目前是这样设置的：

图标不太对，忽略它，不过我确实想把它移到右上角。我想我可以用下面的 CSS 来完成它：

.ui-dialog .ui-dialog-titlebar-close {
  border-radius: 17px;
  height: 33px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -18px;
  top: -24%;
  width: 33px;
  z-index: 9999;
}

但是现在看起来是这样的：

如何在对话框顶部显示它？我已经有一个很大的 z-index 了，但它不起作用。

谢谢。

Answer 1

将类 ui-dialog css 属性溢出设置为可见。希望对您有所帮助。

Answer 2

尝试赋予border-radius 和height 不同的值。 这可能是边界半径值只是高度的一半的原因。所以更改height 的值。

例如

.ui-dialog .ui-dialog-titlebar-close {
  border-radius: 17px;
  height: 50px; /*change from 33 to 50px*/
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -18px;
  top: -24%;
  width: 33px;
  z-index: 9999;
}