將按鈕與用戶界面對話框的右上角重疊

Question

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

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

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

我正在努力將關閉按鈕重疊放置在ui-modal-dialog的右上角。 即使我允許溢出：可見，關閉按鈕仍然卡在角落。 如何放置關閉按鈕，如下圖所示？ 我應該隱藏ui-modal-dialog上的關閉按鈕，並且只需要使用html和css而不使用jquery。

 $.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"); }); 

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

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

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”