如何移动对话框右上角上方的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索引，它不起作用。

谢谢。

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