是否可以更改 jquery 对话框标题的颜色？ 我想要 ”？”第二个对话框的标题(当您按“？”时)用红色背景填充而不是标准的灰色。我在“.dialog-title-bar”类中尝试过，但它不起作用。你能帮助我吗？ 提前致谢! :)
$( "#dialog_arbeitsauftrag" ).dialog({
autoOpen: false,
width: '400',
height: '200',
dialogClass: 'hilfe_arbeitsauftrag',
buttons: [
{
text: "close",
click: function() {
$( this ).dialog( "close" );
}
},
]
});
$( "#dialog-arbeitsauftrag" ).click(function( event ) {
$( "#dialog_arbeitsauftrag" ).dialog( "open" );
event.preventDefault();
});
$( "#dialog-arbeitsauftrag, #icons li" ).hover(
function() {
$( this ).addClass( "ui-state-hover" );
},
function() {
$( this ).removeClass( "ui-state-hover" );
}
);
$(".hilfe_arbeitsauftrag").children(".ui-dialog-titlebar").append("<span id='iconhelp' class='ui-icon ui-icon-help'></span>");
$("#iconhelp").click(function( event ){
$( "#dialog_arbeitsauftrag_hilfe" ).dialog( "open" );
event.preventDefault();
});
$( "#dialog_arbeitsauftrag_hilfe" ).dialog({
autoOpen: false,
width: '200',
height: '100',
});#dialog-arbeitsauftrag {
padding: 15.5px 0px 23px; !important
text-decoration: none;
position: relative;
}
#dialog-arbeitsauftrag span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 25%;
margin-top: -8px;
}
.dialog-title-bar{
background-color: red;
}
#dialog_arbeitsauftrag_hilfe{
padding: 10px 10px 10px 10px; !important
text-decoration: none;
position: relative;
}
#iconhelp_arbeitsauftrag{
cursor: pointer;
float: right;
margin-right:10px;
}
#dialog-arbeitsauftrag span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 25%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<html>
<head>
</head>
<body>
<button id="dialog-arbeitsauftrag" class="ui-state-default ui-corner-all">
Arbeitsauftrag
</button>
<div id="dialog_arbeitsauftrag" title="Arbeitsauftrag">
<p>
Blablabla.
</p>
</div>
<div id="dialog_arbeitsauftrag_hilfe" class="dialog-title-bar" title="Hilfebox">
<font face="arial" size="2">
Some more blablabla.
</font>
</div>
</body>
</html>最佳答案
您添加了 2 个特殊的 dialogClass，您已经为第一个对话框添加了
$("#dialog_arbeitsauftrag_hilfe").dialog({
autoOpen: false,
width: '200',
height: '100',
dialogClass: 'arbeitsauftrag_hilfe',
});
然后
.hilfe_arbeitsauftrag #iconhelp {
background-color: red;
}
.arbeitsauftrag_hilfe .ui-dialog-titlebar {
background-color: red;
background-image: none;
}
$("#dialog_arbeitsauftrag").dialog({
autoOpen: false,
width: '400',
height: '200',
dialogClass: 'hilfe_arbeitsauftrag',
buttons: [{
text: "close",
click: function() {
$(this).dialog("close");
}
}, ]
});
$("#dialog-arbeitsauftrag").click(function(event) {
$("#dialog_arbeitsauftrag").dialog("open");
event.preventDefault();
});
$("#dialog-arbeitsauftrag, #icons li").hover(
function() {
$(this).addClass("ui-state-hover");
},
function() {
$(this).removeClass("ui-state-hover");
}
);
$(".hilfe_arbeitsauftrag").children(".ui-dialog-titlebar").find('.ui-dialog-title').append("<span id='iconhelp' class='ui-icon ui-icon-help'></span>");
$("#iconhelp").click(function(event) {
$("#dialog_arbeitsauftrag_hilfe").dialog("open");
event.preventDefault();
});
$("#dialog_arbeitsauftrag_hilfe").dialog({
autoOpen: false,
width: '200',
height: '100',
dialogClass: 'arbeitsauftrag_hilfe',
});#dialog-arbeitsauftrag {
padding: 15.5px 0px 23px;
!important text-decoration: none;
position: relative;
}
#dialog-arbeitsauftrag span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 25%;
margin-top: -8px;
}
.dialog-title-bar {
background-color: red;
}
#dialog_arbeitsauftrag_hilfe {
padding: 10px 10px 10px 10px;
!important text-decoration: none;
position: relative;
}
#iconhelp_arbeitsauftrag {
cursor: pointer;
float: right;
margin-right: 10px;
}
#dialog-arbeitsauftrag span.ui-icon {
margin: 0 5px 0 0;
position: absolute;
left: .2em;
top: 25%;
margin-top: -8px;
}
#icons {
margin: 0;
padding: 0;
}
#icons li {
margin: 2px;
position: relative;
padding: 4px 0;
cursor: pointer;
float: left;
list-style: none;
}
#icons span.ui-icon {
float: left;
margin: 0 4px;
}
.hilfe_arbeitsauftrag #iconhelp {
background-color: red;
float: right;
}
.arbeitsauftrag_hilfe .ui-dialog-titlebar {
background-color: red;
background-image: none;
}<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.3/themes/smoothness/jquery-ui.css" />
<button id="dialog-arbeitsauftrag" class="ui-state-default ui-corner-all">
Arbeitsauftrag
</button>
<div id="dialog_arbeitsauftrag" title="Arbeitsauftrag">
<p>
Blablabla.
</p>
</div>
<div id="dialog_arbeitsauftrag_hilfe" class="dialog-title-bar" title="Hilfebox">
<font face="arial" size="2">Some more blablabla.</font>
</div>关于javascript - 改变jquery对话框的颜色，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38610911/