在jQuery UI模式對話框打開時執行動作

Question

我有一個div元素，點擊它可以打開一個jQuery UI模式對話窗口。我想要做的是在模式對話框打開期間突出顯示div元素（意思是改變它的顏色），並在關閉對話框窗口時將其恢復到原始狀態。是否有可能這樣做？

使用.css方法更改背景色並不像我想要的那樣工作。我的代碼：

HTML

<div id="help" class="hover">Help</div> 

<div id="helpdialog" class="helpbox"> 
<header id="helptitle">Help</header>  
<p id="helptext"> 
</p> 
    </div> 

JS

$('#help').on('click',function() { 
$('#help').css('background-color','#F0E68C'); 
$("#helpdialog").dialog({ 
height: 670, 
width: 570, 
modal: true, 
draggable: true, 
resizable: false, 
dialogClass: "helpbox", 
buttons: { Close: function() { $(this).dialog("close"); 
$('#help').css('background-color',''); } }, 
create: function(event, ui) 
{ 
$(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar").css("display","none");  
$(this).parents(".ui-dialog").css("padding", 0); 
$(this).parents(".ui-dialog").css("border", '1em solid #709CB4'); 
$(this).parents(".ui-dialog").css("border-radius", '0.6em');  
$(this).parents(".ui-dialog:first").find(".ui-dialog-content").css("padding",0); 
} 
}); 
}); 

Answer 1

使用close和open事件

$('#help').on('click', function() { 

    $("#helpdialog").dialog({ 
     height : 670, 
     width : 570, 
     modal : true, 
     draggable : true, 
     resizable : false, 
     dialogClass : "helpbox", 
     buttons : { 
      Close : function() { 
       $(this).dialog("close"); 
      } 
     }, 
     create : function(event, ui) { 
      $(this).parents(".ui-dialog:first").find(".ui-dialog-titlebar") 
        .css("display", "none"); 
      $(this).parents(".ui-dialog").css("padding", 0); 
      $(this).parents(".ui-dialog").css("border", '1em solid #709CB4'); 
      $(this).parents(".ui-dialog").css("border-radius", '0.6em'); 
      $(this).parents(".ui-dialog:first").find(".ui-dialog-content").css(
        "padding", 0); 
     }, 
     open : function(event, ui) { 
      $('#help').css('background-color', '#F0E68C'); 
     }, 
     close : function(event, ui) { 
      $('#help').css('background-color', ''); 
     } 
    }); 
}); 

Answer 2

取而代之的是

$('#help').css('background-color',''); 

設置一些色彩

$('#help').css('background-color','#aaa');