I use it to inform users of version changes. Here is a simplified version: <div class="sheet-wrapper">
<input type="hidden" name="attr_processing" class="show-processing" value="">
<div class="processing">
<span name="attr_processing"></span>
<div class="center">
<label class="pseudo-button-wrapper visible-button">
<input type="checkbox" name="attr_close_processing" value="1">
<span data-i18n="CLOSE"></span>
</label>
</div>
</div>
</div>
// css for showing/hiding processing
.sheet-processing {
background-color: $transparent-black;
border-radius: $border-radius;
color: $off-white;
display: none;
padding: 2px;
position: absolute;
right: -15px;
top: -30px;
width: 215px;
z-index: 99999;
}
.sheet-show-processing:not([value='']) ~ .sheet-processing {
display: block;
}
.sheet-wrapper {
position: relative;
}
// sheet workers for closing
close() {
getSetItems('Processing.close', {
collectionArray: ['processing'],
callback: (data) => {
data.processing = '';
},
});
}
setup() {
on('change:close_processing', () => {
this.close();
});
}
It's written in ES6 with some wrappers, but the concept should be understandable. You can then show anything in that box by changing the "processing" field. The user can then close the window via the close_processing pseudo button.
