Personalizzare lo z-index delle videate popup

Tips & Tricks
,
1

Avendo integrato un componente JS di terze parti che funziona ovviamente secondo le sue regole, ho avuto la necessità di portare in primo piano le finestre di popup standard del framework se richiamate da un popup di questo componente che già mette un suo overlay e ha uno z-index più alto di quello di InDe.

Ho quindi indagato vari metodi ma quello più comodo e funzionante è il seguente:

// Cerco z-index più alto nella pagina (source: https://bobbyhadz.com/blog/javascript-find-highest-z-index-on-page )
let maxZindex = Math.max(
  ...Array.from(document.querySelectorAll('body *'), el =>
    parseFloat(window.getComputedStyle(el).zIndex),
  ).filter(zIndex => !Number.isNaN(zIndex)),
  0,
);
let popup = document.getElementById('frm:|1');
let popupContainer = popup.closest('.popup-frame-container');
let popupID = popupContainer.id;
popupID = popupID.slice(0, -3);
document.getElementById(popupID+':mb').style.zIndex = maxZindex + 1; // overlay
popupContainer.style.zIndex = maxZindex + 2; // popup modale

Questo codice può essere messo all’interno di una costante e richiamato nel seguente modo:

app.executeOnclient(formatMessage("codice", Popup.me()))
3 Mi Piace
2

@d.termini mi sembra una buona soluzione e ti ringrazio della condivisione qui nella Community.
È sicuramente una cosa che può tornare utile.

1 Mi Piace