When displaying a Notification on the center of the page, a user still has access to the dashboard below. It would be very helpfull to be able to display a (center or all) Notification in such a way that access to the dashboard page is not possible anymore until the Notification disappears (either by user action or on time-out).
Again, you have not stated whether this is original dashboard or newer Dashboard 2.0.
Based on your other post, i will assume Dashboard 2.0
Since Dashboard 2.0 is built on vuetify, you can use a persistent modal dialog in a template:
Demo flow:
[{"id":"2f7fe650392dfa22","type":"ui-template","z":"4d56d98e6d507e0a","group":"2980b33865f3a94a","page":"","ui":"","name":"","order":0,"width":0,"height":0,"head":"","format":"<template>\n <div class=\"text-center pa-4\">\n <v-dialog v-model=\"dialog\" max-width=\"400\" persistent>\n <v-card\n :prepend-icon=\"icon\"\n :text=\"message\"\n :title=\"title\"\n >\n <template #actions>\n <v-spacer />\n\n <v-btn v-if=\"button1\" @click=\"onButton1\">\n {{ button1 }}\n </v-btn>\n\n <v-btn v-if=\"button2\" @click=\"onButton2\">\n {{ button2 }}\n </v-btn>\n </template>\n </v-card>\n </v-dialog>\n </div>\n</template>\n\n<script>\nexport default {\n data () {\n return {\n dialog: false,\n icon: 'mdi-map-marker',\n title: 'Info',\n message: 'Are you sure?',\n button1: 'OK',\n button2: ''\n }\n },\n watch: {\n msg: function () {\n const hasProperty = (obj, prop) => Object.prototype.hasOwnProperty.call(obj, prop)\n if (this.msg.topic === 'show') {\n if (hasProperty(this.msg?.payload, 'icon')) { this.icon = this.msg?.payload.icon }\n if (hasProperty(this.msg?.payload, 'title')) { this.title = this.msg?.payload.title }\n if (hasProperty(this.msg?.payload, 'message')) { this.message = this.msg?.payload.message }\n if (hasProperty(this.msg?.payload, 'button1')) { this.button1 = this.msg?.payload.button1 }\n if (hasProperty(this.msg?.payload, 'button2')) { this.button2 = this.msg?.payload.button2 }\n this.dialog = true\n }\n if (this.msg?.topic === 'hide') {\n this.dialog = false\n }\n }\n },\n methods: {\n onButton1: function () {\n this.send({ topic: 'button1', payload: this.button1 })\n },\n onButton2: function () {\n this.send({ topic: 'button2', payload: this.button2 })\n }\n }\n}\n</script>\n","storeOutMessages":true,"passthru":false,"resendOnRefresh":true,"templateScope":"local","className":"","x":560,"y":480,"wires":[["83005a0aebbf8d08","e5c62c9ebc9cb599"]]},{"id":"88cc15ba20a8f095","type":"inject","z":"4d56d98e6d507e0a","name":"Show \"Apply changes\" dialog","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"show","payload":"{\"title\":\"Apply changes?\",\"message\":\"Are you sure you want to apply the changes?\",\"button1\":\"Yes\",\"button2\":\"No\"}","payloadType":"json","x":280,"y":440,"wires":[["2f7fe650392dfa22"]]},{"id":"857ee42e641acb7f","type":"inject","z":"4d56d98e6d507e0a","name":"Show \"It has finished\" dialog","props":[{"p":"payload"},{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"show","payload":"{\"title\":\"Finished\",\"message\":\"The long operation has now finished\",\"button1\":\"OK\",\"button2\":\"\"}","payloadType":"json","x":280,"y":480,"wires":[["2f7fe650392dfa22"]]},{"id":"dff770e668bcd51e","type":"inject","z":"4d56d98e6d507e0a","name":"Hide dialog","props":[{"p":"topic","vt":"str"}],"repeat":"","crontab":"","once":false,"onceDelay":0.1,"topic":"hide","x":340,"y":520,"wires":[["2f7fe650392dfa22"]]},{"id":"83005a0aebbf8d08","type":"debug","z":"4d56d98e6d507e0a","name":"debug 1","active":true,"tosidebar":true,"console":false,"tostatus":true,"complete":"payload","targetType":"msg","statusVal":"payload","statusType":"auto","x":720,"y":480,"wires":[]},{"id":"e5c62c9ebc9cb599","type":"change","z":"4d56d98e6d507e0a","name":"","rules":[{"t":"set","p":"topic","pt":"msg","to":"hide","tot":"str"}],"action":"","property":"","from":"","to":"","reg":false,"x":570,"y":560,"wires":[["2f7fe650392dfa22"]]},{"id":"2980b33865f3a94a","type":"ui-group","name":"Snapshots","page":"8fe11f0a1785825d","width":"6","height":"1","order":-1,"showTitle":true,"className":"","visible":"true","disabled":"false"},{"id":"8fe11f0a1785825d","type":"ui-page","name":"Cameras","ui":"be29745a6e568f30","path":"/page6","icon":"cctv","layout":"grid","theme":"092547d34959327c","order":-1,"className":"","visible":"true","disabled":"false"},{"id":"be29745a6e568f30","type":"ui-base","name":"UI Name","path":"/dashboard","includeClientData":true,"acceptsClientConfig":["ui-notification","ui-control"],"showPathInSidebar":false},{"id":"092547d34959327c","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]
