Change Mask message to image at runtime

[Mohammed Nasman]

Hello,

I used this code inside CustomCSS in ServerModule to change mask message to image :

  .x-mask-msg{
       background:none;
       border-width:0px;
    }
    .x-mask-msg-inner{
       border-width:0px;
       color:none;
       padding:50px;
       background: rgba(0, 0, 0, 0);
       background-image:url(files/loading.gif);
       background-repeat:no-repeat;
       background-size: contain;
    }
    .x-mask-msg-text{
       display:none;
       background-image:none;
    }

Can i change it from image to text at runtime ?

Thanks.

[Sherzod]

Hello,

36 minutes ago, Mohammed Nasman said:

Can i change it from image to text at runtime ?

Solution:

1. MainForm.Script ->

function setMaskImage() {
    if (!document.getElementById('customMaskStyle')) {
        var sheet = document.createElement('style');
        sheet.innerHTML =
          ".x-mask-msg {\
              background: none !important;\
              border-width: 0px !important;\
           }\
          .x-mask-msg-inner {\
              background: rgba(0,0,0,0) !important;\
              background-image: url(files/loading.gif) !important;\
              background-repeat: no-repeat !important;\
              background-size: contain !important;\
              padding: 50px !important;\
          }\
          .x-mask-msg-text {\
              display: none !important;\
          }";
        sheet.id = "customMaskStyle";
        document.head.appendChild(sheet);
    }
}
function restoreMaskText() {
    var custom = document.getElementById('customMaskStyle');
    if (custom) custom.remove();
}
setMaskImage(); //Call setMaskImage() to apply the image mask right away.

2. Usage:

setMaskImage();      // Switches mask to show an image instead of text
restoreMaskText();   // Restores the default mask with text

 

[Mohammed Nasman]

1 hour ago, Sherzod said:

Hello,

Solution:

1. MainForm.Script ->

function setMaskImage() {
    if (!document.getElementById('customMaskStyle')) {
        var sheet = document.createElement('style');
        sheet.innerHTML =
          ".x-mask-msg {\
              background: none !important;\
              border-width: 0px !important;\
           }\
          .x-mask-msg-inner {\
              background: rgba(0,0,0,0) !important;\
              background-image: url(files/loading.gif) !important;\
              background-repeat: no-repeat !important;\
              background-size: contain !important;\
              padding: 50px !important;\
          }\
          .x-mask-msg-text {\
              display: none !important;\
          }";
        sheet.id = "customMaskStyle";
        document.head.appendChild(sheet);
    }
}
function restoreMaskText() {
    var custom = document.getElementById('customMaskStyle');
    if (custom) custom.remove();
}
setMaskImage(); //Call setMaskImage() to apply the image mask right away.

2. Usage:

setMaskImage();      // Switches mask to show an image instead of text
restoreMaskText();   // Restores the default mask with text

 

Thanks, it works!