0

クリックするとjQuery UIモーダルダイアログウィンドウが開くdiv要素があります。私がやりたいことは、モーダル ダイアログが開いている間は 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);  
}  
});
});
4

2 に答える 2

2

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', '');
        }
    });
});
于 2013-04-02T06:05:38.877 に答える
0

これの代わりに

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

色を設定する

$('#help').css('background-color','#aaa');
于 2013-04-02T05:56:36.227 に答える