Question

我已经开始在对话框的测试，我似乎无法得到类的工作。我创建了这个测试，可以有人请告诉我为什么类不工作？按钮类也不对话框类。我试图把它的HTML和jQuery的，没有运气。

$('#myButton').click(function() {
  var msg = $('#myButton').attr("msg");
  $('#dialog').html(msg);
  $('#dialog').dialog({
    title: "Delete Prompt",
    class: "dialogClass",
    autoOpen: true,
    show: "blind",
    hide: "explode",
    modal: true,
    width: "400px",
    resizable: false,
    buttons: [{
        text: "Yes",
        class: 'yesClass',
        click: function() {
          $('#resposneText').html('Yes was clicked');
          $('#dialog').dialog('close');
        }
      },
      {
        text: "No",
        class: 'noClass',
        click: function() {
          $('#resposneText').html('No was clicked');
          $('#dialog').dialog('close');
        }
      }
    ],
    open: function(event, ui) {
      //setTimeout(function(){
      //    $('#dialog').dialog('close');
      //}, 10000);
    }
  });
});

body {
  margin: 10px;
}

.ui-dialog,
.ui-dialog-title {
  text-align: center;
  width: 100%;
}

.ui-dialog-titlebar-close {
  display: none;
}

.noClass {
  background-color: #000;
  color: #fff;
}

.yesClass {
  background-color: #fff;
  color: #000;
}

.ui-dialog
{
  background: blue;
}

.ui-button.yesClass 
{
    background: green;
} 
 
.ui-button.yesClass.ui-state-hover,
.ui-button.yesClass.ui-state-active
{
    background: red;    
}

.ui-dialog .ui-dialog-buttonpane {
  text-align: center;
}

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.8.18/jquery-ui.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/themes/ui-lightness/jquery-ui.css">
<div id="dialog" class="dialogClass" style="display:none;"></div>
<input type="button" id="myButton" msg="Are you sure you want to delete it?" value="Delete This">
<div id="resposneText"></div>

http://jsfiddle.net/gavinlandon/zkhoja5c/

Answer 1

问题不是JavaScript问题，更多是CSS问题。

似乎通过jQueryUI添加的类比您的类具有更高的特定性，因此您看不到更改。

尝试一下：

.ui-button.yesClass {
    background: green;
 } 
.ui-button.yesClass.ui-state-hover,
.ui-button.yesClass.ui-state-active{
    background: red;    
}

希望您能想到这个主意，并且可以实现您所需要的。

JQuery的对话框类

1 个答案: