CODEWITHSUNDEEP
jqueryjquery-ui
Ronophobia
Ronophobia

Reputation: 349

Perform action while jQuery UI modal dialog is open

I have a div element which on clicking on it opens a jQuery UI modal dialog window. What I want to do is highlight the div element(meaning change its color) for the duration that the modal dialog is open and revert it back to its original state on closing the dialog window. Is it possible to do so?

Changing the background-color using the .css method isn't working like I want it to. My code:

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

Upvotes: 0

Views: 1043

Answers (2)

Arun P Johny
Arun P Johny

Reputation: 388316

Use the close and open events

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

Upvotes: 2

Ilia Frenkel
Ilia Frenkel

Reputation: 1977

Instead of this

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

Set some color

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

Upvotes: 0

Related Questions