Выполнение действия при открытии модального диалога jQuery UI

Question

У меня есть элемент div, который при нажатии на него открывает модальное диалоговое окно jQuery. То, что я хочу сделать, это выделить элемент 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');