Overlay panel with a transparent mask

[Tegola]

Hello everybody,
I'm trying to create a popover with a transparent mask:

Ext.Viewport.add({
    xtype: 'panel',
    id: 'ap-user-menu',
    modal: true,
    hideOnMaskTap: true,
    items: {
        xtype: 'button',
        text: 'Log out',
        name: 'logout',
        ui: 'decline'
    }
});

However, I want to make the mask background completely transparent, while keeping the hideOnMaskTap functionality. How can I achieve this?

Thanks

[jerome76]

You can use your own Ext.Mask when applying your modal config (as seen in the comments of the config in the Docs)

[Tegola]

I don't get it, setting the mask to my modal panel will cover it. The mask I want to modify is behind it.

[gruese]

I assume setting

.x-mask {
     opacity: 0;
}

in your css/scss file is not an option because you have other masks that are not supposed to be transparent?

[Tegola]

Yes, I can't! It's a view-packed app indeed

[gruese]

Hmm, setting your overlay's modal config to something like { cls: 'opaquemask' } (as suggested by badgerb1 here) works for me.

What platform are you testing on?

[Tegola]

OSX 10.8, Safari 6, but I just found it was my bad.

I did try setting opacity: 0 to the "masked" object, and to the modal -> masked object, but turns out the modal object IS the mask, and I didn't get it before.

Here's the working code:

Ext.Viewport.add({
    xtype: 'panel',
    modal: {
          style: 'opacity: 0'
    },

    hideOnMaskTap: true,
    items: {
        xtype: 'button',
        text: 'Log out',
        name: 'logout',
        ui: 'decline'
    }
});

[drb]

modal: { transparent: true }