[CLOSED] Set Popup Opacity Default

  1. #1

    [CLOSED] Set Popup Opacity Default


    I wanted to ask you if there is a possibility to change the default opacity of the popup background? I found this old thread:

    but as the "x-mask" is used on other elements (disabled ones) that doesn't work anymore...

    best regards,

    Last edited by tMp; Sep 19, 2019 at 12:06 PM.
  2. #2
    Hello @tMp!

    I don't think the "x-mask" is used on all components when they are disabled, can you be more specific? The example in the forum thread you pointed still works for me.
    Fabrício Murta
    Developer & Support Expert
  3. #3
    Hello Fabricio,

    Yes you are right. Everything seems to work except a disable panel. I will try to look for a workaround. Strange that a disabled panel and the background share common main CSS class which makes them depending on each other. Or is there a simple way to entangle them?

    Thank you,

  4. #4
    A panel? Let me check that. I honestly didn't notice this with the test case in the thread you pointed... Will post a follow-up in a moment.
    Fabrício Murta
    Developer & Support Expert
  5. #5
    You can use the maskOnDisable setting to disable masking completely when it is disabled. Then you can apply your own styling to the panel.


    Go further CSS and revert the opacity behavior for disabled items (notice this may bring undesired behavior if a mask is applied to a disabled item):

    .x-item-disabled .x-mask {
        opacity: 0.4;
    -or, again-

    If you don't mind legacy browser support on your application, you can then not fiddle with whatever the mask is for the theme if where it is applied is a disabled item:

    .x-masked:not(.x-item-disabled) .x-mask {
        opacity: 0.9;
        background: none repeat scroll 0 0 #000 !important;
    Then from that point, you should keep an eye open for masks not getting "black". This last option may make masks look unchanged for instance, if they are then applied by disabled items (or items within a disabled container, for instance).

    All on all, that's just CSS work, to make the mask custom as-needed.

    Hope this helps!
    Fabrício Murta
    Developer & Support Expert
  6. #6
    Hello Fabricio,

    Thanks for your ideas. The solution is so easy, that I am really sorry to have bothered you at all. Your CSS tips brought me to have a look at the disable background. If I select now

    body > div.x-mask {}
    everything works fine!

    thanks a lot.

    best regards,

  7. #7
    Glad it helped, @tMp! Thanks for the feedback!
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Set default button
    By michaeld in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Jun 03, 2013, 4:07 AM
  2. [CLOSED] How set default Value in Combox
    By boris in forum 2.x Legacy Premium Help
    Replies: 4
    Last Post: Feb 27, 2013, 9:35 AM
  3. Hide Request Failure default popup window
    By brittongr in forum 1.x Help
    Replies: 2
    Last Post: Jan 06, 2012, 11:37 AM
  4. How to set text font for a coolite popup window
    By ajaybabu.maddinani in forum 1.x Help
    Replies: 3
    Last Post: Jan 05, 2010, 6:59 AM
  5. Replies: 1
    Last Post: Aug 11, 2009, 1:28 AM

Posting Permissions