場所UI-モーダルダイアログ

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-モーダルダイアログボックスの右上隅の閉じるボタンの重複を置くのに苦労しています。オーバーフロー：可視を許可しても、クローズボタンがまだコーナーに詰まっています。次の画像のようにクローズボタンを配置するにはどうすればよいですか？ Shoud私はui-modal-dialogのcloseボタンを隠し、jqueryなしでhtmlとcssだけを使う必要があります。コメントへ

$.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-ダイアログタイトルas.ui-ダイアログで混乱していたので、私はちょうど

.ui-dialog{ overflow: visible;} 

を追加しました。 「3 、

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

1 ".ui-ダイアログのタイトル・バー"、 2 ".ui-ダイアログタイトル"：今、私は次のように修正することができました。 ui-dialog-titlebar-close "、 4" .ui-dialog "