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