CODEWITHSUNDEEP
jquerycssjquery-ui
CHS
CHS

Reputation: 965

How to style focus on jquery ui dialog widget?

I'm planning to have multiple modeless dialogs on a page. I was hoping that when a dialog was clicked it would get the .ui-state-focus class and that it would be removed when clicked off so I could easily style an active/inactive dialog. I basically want to change its border color.

I'm using jqueryUI 1.10 and unfortunately I don't see anyway to style focus on/off of the dialog using just CSS.

What's the best way to add this functionality? I'm willing to derive a new dialog widget based on the original dialog widget, but would appreciate some advise on how best to code this.

Upvotes: 1

Views: 1132

Answers (1)

Tommi Halonen
Tommi Halonen

Reputation: 248

Something like this:

$('.ui-dialog').on('click', function() {
    $('.ui-dialog').removeClass('ui-state-focus');
    $(this).addClass('ui-state-focus');
});

And to remove focus if user clicks anything else than any dialog:

$(document).on('click', function(e) {
    var $target = $(e.target);
    if(!$target.hasClass('ui-dialog') && $target.parents().hasClass('ui-dialog')) {
        $('.ui-dialog').removeClass('ui-state-focus');
    }
});

Upvotes: 2

Related Questions