Results 1 to 8 of 8

Thread: Overlay panel with a transparent mask

  1. #1
    Sencha User
    Join Date
    Jul 2012
    Location
    Italy
    Posts
    84
    Answers
    1
    Vote Rating
    4
      0  

    Default 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
    100
      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
      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
    21
    Answers
    2
    Vote Rating
    2
      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
      0  

    Default

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

  7. #6
    Sencha User
    Join Date
    Aug 2012
    Posts
    21
    Answers
    2
    Vote Rating
    2
      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
      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
    149
    Answers
    5
    Vote Rating
    7
      0  

    Default

    modal: { transparent: true }

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •