Created by @vylink in Q&As
@vylink
@vylink

Hi,

how to implement (extend) dialog behaviour to be closable by keyboard key(esc), or by click outside?

Thanks,

M

@jahudka
@jahudka

Hi,

closing on Esc is already possible with the nittro-extras-keymap package. If you just install that and enable it in your builder, closing by Escape should Just Work without any further configuration. You can also customise this behaviour using the keyMap option.

To close the dialog when clicking outside you can overload the _handleClick() method. This is a delegated listener for all click events anywhere in the root dialog element (which, incidentally, is the backdrop, or outside area, of the dialog). You could do something like this:

_context.invoke(function(Dialog) {
    var originalHandler = Dialog.prototype._handleClick;

    Dialog.prototype._handleClick = function(evt) {
        if (evt.target === this._.elms.holder) {
            evt.preventDefault();
            this.hide();
        } else {
            originalHandler.call(this, evt);
        }
    };
}, { Dialog: 'Nittro.Dialogs.Dialog' });

Sign in to post a reply