我正在修复 ui-icon-close 的颜色,这是一个关闭图标“X”。目前,我主要看到以下页面How To Specify (Override) JQuery Icon Color帮助我更改“.ui-close-icon”的颜色,这是“X”的图标颜色。但到目前为止还行不通。我该如何解决?
我的 JS fiddle 。
https://jsfiddle.net/kimihiro/hqxmmj8q/show/
$.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 {
height: 30px;
width: 200px;
left: 50%;
margin-top: -15px;
/* = -height / 2 */
margin-left: -100px;
/* = -width / 2 */
position: fixed;
top: 80%;
background: rgba(4, 115, 184, 0.9);
color: #fff;
font-style: Arial;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
border-style: outset;
display: flex;
transition: .5s ease;
vertical-align: middle;
justify-content: center;
}
.myTitleClass .ui-dialog-title {
white-space: normal;
}
.myTitleClass .ui-dialog-titlebar {
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: rgb(4, 127, 184);
color: #fff;
font-size: 16px;
font-weight: 700;
border-style: none;
}
.ui-widget-overlay {
position: fixed;
background: black;
}
.myTitleClass .ui-dialog-titlebar-close {
background: rgba(4, 115, 184, 0.9);
border-radius: 17px;
height: 33px;
margin: -10px 0 0;
padding: 1px;
position: absolute;
right: -28px;
top: -24%;
width: 33px;
}
.myTitleClass.ui-icon-close {
background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-dialog {
overflow: visible;
}
}
<script type="text/javascript" src="jsapi/utils.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></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>
最佳答案
您可以使用以下 CSS 覆盖图标:
.ui-state-default .ui-icon {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}
您可以下载您喜欢的任何颜色的图标 png 文件。只需更改以下网址中的颜色部分:
http://download.jqueryui.com/themeroller/images/ui-icons_*COLOR*_256x240.png
COLOR - 更改颜色代码,例如 ff0000,ffffff
(但不要将 URL 用作 CDN,最好将文件保存在本地)
$.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");
});
.ui-state-default .ui-icon {
background-image: url(http://download.jqueryui.com/themeroller/images/ui-icons_ffffff_256x240.png) !important;
}
input#opener {
height: 30px;
width: 200px;
left: 50%;
margin-top: -15px;
/* = -height / 2 */
margin-left: -100px;
/* = -width / 2 */
position: fixed;
top: 80%;
background: rgba(4, 115, 184, 0.9);
color: #fff;
font-style: Arial;
font-size: 16px;
font-weight: 700;
line-height: 1.5;
border-style: outset;
display: flex;
transition: .5s ease;
vertical-align: middle;
justify-content: center;
}
.myTitleClass .ui-dialog-title {
white-space: normal;
}
.myTitleClass .ui-dialog-titlebar {
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: rgb(4, 127, 184);
color: #fff;
font-size: 16px;
font-weight: 700;
border-style: none;
}
.ui-widget-overlay {
position: fixed;
background: black;
}
.myTitleClass .ui-dialog-titlebar-close {
background: rgba(4, 115, 184, 0.9);
border-radius: 17px;
height: 33px;
margin: -10px 0 0;
padding: 1px;
position: absolute;
right: -28px;
top: -24%;
width: 33px;
}
.myTitleClass.ui-icon-close {
background-image: url("images/ui-icons_ffffff_256x240.png");
}
.ui-dialog {
overflow: visible;
}
}
<script type="text/javascript" src="jsapi/utils.min.js"></script>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="js/script.js"></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>
关于javascript - ui-modal-dialog ui-icon-close 颜色变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47755767/