1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Answers
    1
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default Answered: Overlay panel with a transparent mask

    Answered: Overlay panel with a transparent mask


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

    Code:
    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

  2. 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?

  3. #2
    Sencha User jerome76's Avatar
    Join Date
    Apr 2012
    Location
    New Jersey
    Posts
    1,149
    Answers
    132
    Vote Rating
    99
    jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice jerome76 is just really nice

      1  

    Default


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

  4. #3
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Answers
    1
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default


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

  5. #4
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Answers
    2
    Vote Rating
    2
    gruese is on a distinguished road

      0  

    Default


    I assume setting

    Code:
    .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?

  6. #5
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Answers
    1
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default


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

  7. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    18
    Answers
    2
    Vote Rating
    2
    gruese is on a distinguished road

      0  

    Default


    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?

  8. #7
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Answers
    1
    Vote Rating
    4
    Tegola is on a distinguished road

      0  

    Default


    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:
    Code:
    Ext.Viewport.add({
        xtype: 'panel',
        modal: {
              style: 'opacity: 0'
        },
    
        hideOnMaskTap: true,
        items: {
            xtype: 'button',
            text: 'Log out',
            name: 'logout',
            ui: 'decline'
        }
    });

  9. #8
    Sencha User
    Join Date
    Sep 2011
    Location
    Boston
    Posts
    141
    Answers
    5
    Vote Rating
    6
    drb is on a distinguished road

      0  

    Default


    modal: { transparent: true }