在jquery dialoge titelbar中设置图标样式

Question

如何在jquery标题栏中显示一个与默认关闭按钮具有相同按钮样式的图标，使用＆＃34;？＆＃34;而不是＆＃34; x＆＃34;？在这种情况下，红色图标。我完全没有这样做。

＆＃13;

＆＃13;

$("#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',
});

＆＃13;

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

＆＃13;

<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">
  Blaaaa.
</button>
<div id="dialog_arbeitsauftrag" title="Bla.">
  <p>
    Blablabla.
  </p>
</div>

<div id="dialog_arbeitsauftrag_hilfe" class="dialog-title-bar" title="More Bla.">
  <font face="arial" size="2">Some more blablabla.</font>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要将其包装在div或button中，这样可以更轻松地修改它。它也可以仅使用span标签进行修改，但几乎不会对其进行任何控制。

删除了问号样式，修改了jQuery代码并添加了一些样式。

你给出的jsFiddle代码出了点问题，所以我在stackOverflow上给你的代码中的问号按钮设置了样式。

https://jsfiddle.net/umw7bcqz/2/