更改jquery对话框的颜色

时间：2016-07-27 10:51:54

标签： javascript jquery html css

是否可以更改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>

5 个答案:

答案 0 :(得分：1)

您添加了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>

答案 1 :(得分：1)

试试这个

$("#alertmsg").dialog({ resizable: false,
                title: "eDurar Alert..!",
                height: "auto",
                width: "auto",
                modal: true,
                my: "center",
                at: "center",
                dialogClass: 'no-close',
                of: window
            });
            $('.ui-widget-header').css({ 'background-color': '#e9171f' });
            $('.ui-dialog-titlebar').css({ 'background-color': 'red' });

        }

答案 2 :(得分：0)

是的，只需覆盖.ui-dialog-titlebar，将其添加到CSS 

.hilfe_arbeitsauftrag .ui-dialog-titlebar { background-color: red; background-image: none;}

Working jsfiddle

答案 3 :(得分：0)

这是一个快速而肮脏的解决方案。只需使用标题div的组合类来创建一个非常特定的目标，然后指定一个红色背景。选择器看起来像：.ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix.ui-draggable-handle。

请参阅下面的更新代码段。 

$( "#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',
									});
 .ui-dialog-titlebar.ui-widget-header.ui-corner-all.ui-helper-clearfix.ui-draggable-handle {
background:red;
}

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

答案 4 :(得分：0)

$( "#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;
	}
    .ui-dialog-titlebar{
      background: red !important;
    }
<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>

相关问题
最新问题