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
Tagged:
5