将按钮重叠在ui-modal对话框的右上角

Question

＆＃13;

＆＃13;

<script>
$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  _title: function(title) {
    if (!this.options.title) {
      title.html("&#160;");
    } else {
      title.html(this.options.title);
    }
  }
}));
$("#dialog").dialog({
  autoOpen: false,
  　　height: 300,
  width: 830,
  dialogClass: 'myTitleClass',
  modal: true,

  title: "Carpe Diem. Nunca Acredito Posteiro",
  closeOnEscape: false,
  open: function(event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui);
  },
  buttons: {
    "Save": function() {
      $(this).trigger(updateKeyword());
    }
  }
})

$("#opener").click(function() {
  $("#dialog").dialog("open");
});

＆＃13;

input#opener {
  position: absolute;
  transition: .5s ease;
  top: 80%;
  left: 45%;
  overflow: visible;
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-style: Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.5;
  position: center;
  border-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myTitleClass .ui-dialog-title {
  overflow: visible;
  white-space: normal;
}

.myTitleClass .ui-dialog-titlebar {
  overflow: visible;
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  height: 60px;
}

.myTitleClass .ui-widget-content .ui-state-default {
  background-image: none;
  background-color: rgba(4, 115, 184, 0.6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.myTitleClass .ui-widget-content .ui-state-hover {
  background-image: none;
  background-color: rgba(4, 115, 184, 1);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.ui-widget-overlay {
  position: fixed;
}

.ui-widget-overlay {
  background: none;
}

.myTitleClass .ui-dialog-titlebar-close {
  border-radius: 17px;
  height: 33px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -28px;
  top: -24%;
  width: 33px;
  overflow: visible;
}

＆＃13;

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link href="https://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css" rel="stylesheet">

<input type="button" id="opener" value="Register Keyword" />
</button>
<div id="dialog">Merry Christmas.
</div>

＆＃13;

＆＃13;

＆＃13;

我正在努力在ui-modal-dialog的右上角放置关闭按钮重叠。即使我允许溢出：可见，关闭按钮仍然卡在角落里。如何放置关闭按钮，如下图所示？ Shoud我隐藏了ui-modal-dialog上的关闭按钮，只需要使用html和css而不需要jquery。

＆＃13;

＆＃13;

$.widget("ui.dialog", $.extend({}, $.ui.dialog.prototype, {
  _title: function(title) {
    if (!this.options.title) {
      title.html(" ");
    } else {
      title.html(this.options.title);
    }
  }
}));
$("#dialog").dialog({
  autoOpen: false,
  　　height: 300,
  width: 830,
  dialogClass: 'myTitleClass',
  modal: true,

  title: "Carpe Diem. Nunca Acredito Posteiro",
  closeOnEscape: false,
  open: function(event, ui) {
    $('.ui-dialog-titlebar-close', ui.dialog | ui);
  },
  buttons: {
    "Save": function() {
      $(this).trigger(updateKeyword());
    }
  }
})

$("#opener").click(function() {
  $("#dialog").dialog("open");
});

＆＃13;

input#opener {
  position: absolute;
  transition: .5s ease;
  top: 80%;
  left: 45%;
  overflow: visible;
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-style: Arial;
  font-size: 16px;
  font-weight: 700;
  line-height: 2.5;
  position: center;
  border-style: none;
  display: flex;
  align-items: center;
  justify-content: center;
}

.myTitleClass .ui-dialog-title {
  overflow: visible;
  white-space: normal;
}

.myTitleClass .ui-dialog-titlebar {
  overflow: visible;
  background: rgba(4, 115, 184, 0.9);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  height: 60px;
}

.myTitleClass .ui-widget-content .ui-state-default {
  background-image: none;
  background-color: rgba(4, 115, 184, 0.6);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.myTitleClass .ui-widget-content .ui-state-hover {
  background-image: none;
  background-color: rgba(4, 115, 184, 1);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  border-style: none;
}

.ui-widget-overlay {
  position: fixed;
}

.ui-widget-overlay {
  background: none;
}

.myTitleClass .ui-dialog-titlebar-close {
  border-radius: 17px;
  height: 33px;
  margin: -10px 0 0;
  padding: 1px;
  position: absolute;
  right: -28px;
  top: -24%;
  width: 33px;
  overflow: visible;
}

＆＃13;

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<input type="button" id="opener" value="Register Keyword">
</button>
<div id="dialog">Merry Christmas.
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

感谢评论。我刚刚添加了

.ui-dialog{ overflow: visible;}

因为我对.ui-dialog-title as.ui-dialog感到困惑。现在我能够修复如下：

  

https://jsfiddle.net/kimihiro/r2aedfmz/show/

1“.ui-dialog-title-bar”，  2“.ui-dialog-title”，  3“.ui-dialog-titlebar-close”，  4“.ui-dialog”