更改jQueryUI对话框的颜色关闭X [英] Change color of jQueryUI dialog close X
问题描述
我有一个jQueryUI对话框，但关闭它的X与背景颜色相同.我该如何更改.我已经使用了托管在他们网站上的jqueryUI CSS，它可以工作，因此它必须是我的jQuery主题.我在 http://www.tapmeister.com/dialog/上有一个在线示例，以及代码在下面列出.谢谢
I have a jQueryUI Dialog, but the X to close it is the same color as the background. How could I change it. I've used the jqueryUI CSS hosted on their site, and it works, so it must be my jQuery theme. I have a live example at http://www.tapmeister.com/dialog/, and the code is listed below. Thanks
<!DOCTYPE HTML>
<html>
<head>
<title>test</title>
<meta charset="utf-8" />
<meta name="robots" content="noindex" />
<script src="http://code.jquery.com/jquery-latest.js"></script>
<link href="css/ui-lightness/jquery-ui-1.9.0.custom.css" type="text/css" rel="stylesheet" />
<script src="js/jquery-ui-1.9.0.custom.min.js" type="text/javascript"></script>
<style type="text/css">
.ui-dialog-titlebar { border:0; background:none; color:#000000; }
</style>
<script type='text/javascript'>
$(document).ready( function() {$("#dialog").dialog({autoOpen: true});});
</script>
</head>
<body>
<div id="dialog" title="Title">Hi There!</div>
</body>
</html>
推荐答案
Your image color is white: http://www.tapmeister.com/dialog/css/ui-lightness/images/ui-icons_ffffff_256x240.png
在Photoshop或其他照片编辑程序中打开文件.然后对所需的颜色进行颜色叠加.在Photoshop中，它将是菜单>图层>图层样式>颜色叠加".保存，然后上传文件.
Open the file in Photoshop or some other photo editing program. Then do a color overlay to the color you want. In Photoshop it would be "menu > layer > layer style > color overlay". Save, then upload file.
仅使用现有的橙色图像可能会更好.只需使用CSS透明度即可.
It may be better just to use your existing orange image. Just use CSS opacity.
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}
这样，将减少一幅图像.
This way there will be one less image called.
查找代码:
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
}
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ffffff_256x240.png);
}
替换为:
.ui-widget-header .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 0.4;
filter: alpha(opacity=40);
}
.ui-state-hover .ui-icon, .ui-state-focus .ui-icon {
background-image: url(images/ui-icons_ef8c08_256x240.png);
opacity: 1;
filter: alpha(opacity=100);
}
这篇关于更改jQueryUI对话框的颜色关闭X的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
