如何在对话框的右上角移动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值的不同值。 这可能是border-radius值只是高度的一半的原因。所以更改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;
}