Tips & Tricks: How to make pop-up windows in JET Config UI without JavaScript!

Summary:

Until such time as dynamic pop-up windows are available natively in Config, here's a straightforward method that produces results identical to help dialog boxes. An optional constraint can be made to require closing the dialog box.

Limitations:

The dialog box is limited to the tab it resides on and can't be re-positioned.

Content (required):

CSS to place in the site-wide stylesheet:

/* ----------- Pop-up window using a config layout group  ----------- */

/* Pop the layout grid out */
/* Grid must have Group checked and Show Title UNchecked */
.group-popup-message{
    position: fixed;
    z-index: 100;
    box-shadow: 1px 1px 10px 0 hsla(0, 0%, 0%,0.45);
    min-width: 30vw;
    left: 35vw;
    top: 30vh;
    padding: 0;
}

/* Style the header using a Boolean attribute displayed as a check box in the first layout row */
/* Label should be left-aligned, Field(Value) should be right-aligned */
.group-popup-message div.panel-row.oj-flex:first-child{
    background-color: #f2f2f3;
    padding: 7px 5px 7px 10px;
    border-bottom: 1px solid #cbcccd;
}
.group-popup-message div.panel-row.oj-flex:first-child .attribute-label,
.group-popup-message div.panel-row.oj-flex:first-child .oj-label,
.group-popup-message div.panel-row.oj-flex:first-child label{
    margin: 0;
    font-size: 18px;
}

/* Replace the Boolean check