Dashboard tips. Simple modal

Dashboard
1

An example how to do a simple modal dialog by using CSS and a bit of structure of dashboard, just to avoid maybe hard work to create everything from scratch.

[{"id":"c6677371.1c906","type":"ui_template","z":"c0ddb509.b04f48","group":"93fae10c.09faa","name":"open modal","order":10,"width":0,"height":0,"format":"<style>\n.modalcontainer {\n    position: absolute;\n    display: block;\n    top: 2em;\n    left: 2em;\n    right: 2em;\n    bottom: 2em;\n    background: var(--nr-dashboard-groupBackgroundColor);\n    color:var(--nr-dashboard-widgetTextColor);\n    box-shadow: 0px 0px 14px black;\n    z-index: 100;\n</style>\n<button class=\"md-raised md-button md-ink-ripple\" id=\"modal-opener\">OPEN MODAL</button>\n\n<script>\n\n$(\"#modal-opener\").closest(\"md-card\").addClass('nr-dashboard-button')\n$(\"#modal-opener\").click(function(){\n    $(\"<div></div>\", {\"class\": \"modalcontainer\",\"id\":new Date().getTime(),\n      on: { click: function( event ) {\n           $('#nr-dashboard-footer').empty()\n        }\n      }\n    }).appendTo( \"#nr-dashboard-footer\" );\n    \n    $(\"<ui-card-panel></ui-card-panel>\",{\"id\":\"modalcardpanel\"}).appendTo(\".modalcontainer\")\n    $(\"<div></div>\",{\"class\":\"nr-dashboard-cardpanel\",\"id\":\"nrpanel\"}).appendTo(\"#modalcardpanel\")\n    $(\"<p></p>\",{\"class\":\"nr-dashboard-cardtitle\"})\n        .text(\"Simple Modal Dialog\").appendTo(\"#nrpanel\")\n    \n    $(\"<md-card></md-card>\",\n    {\"class\":\"nr-dashboard-text _md layout-row layout-align-space-between-center visible\",\n    \"id\":\"modalcard\"}).appendTo(\"#nrpanel\")\n   \n    \n    $(\"<p></p>\",{\"class\":\"nr-dashboard-text\", \"id\":\"textcontent\"})\n        .text(\"Hello World\").appendTo(\"#modalcard\")   \n    \n})\n\n</script>\n<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg) {\n      $(\"#textcontent\").text(msg.payload);\n    }\n  });\n})(scope);    \n</script>\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":230,"y":1500,"wires":[[]]},{"id":"93fae10c.09faa","type":"ui_group","name":"Default","tab":"6ff5405c.a8e6","order":1,"disp":true,"width":"6","collapse":false},{"id":"6ff5405c.a8e6","type":"ui_tab","name":"TEST","icon":"dashboard","order":3,"disabled":false,"hidden":false}]
6 Likes
2

Great and elegant Solution!

In the meantime I solved my problems with modals in iro-color-picker very similar but now I know the correct places to append the divs (I attached them simply to the body).

One question: is there a way to avoid clicks to items in the background as log the modal is open. Currently the popup seams to be "non modal". As log as the gap is small this might not be an issue. Avoiding scrolling might be nice too

3

Most bottom layer then should be 100% width and height and the add css property pointer-events:all for it. Anything under that layer should be unclickable

Of course it can be improved by all means but as always, the needs are different so I showed only the basics.

1 Like
4

I think you should not use this container for widget cos somebody may use it for it's real purpose. Showing the footer.
So maybe we can ask @dceejay to add another container for modal type of things. Just as the footer is, so it can be used without the risk.

1 Like
5

I was observing how notifications / toaster does the job.

image
image726Ă—97 6.54 KB

This was the only example if found so far

6

Style wise those are different containers, thus require different treatments. For my example of modal the footer container is inside the <md-content> which gives the options to have dashboard - like content build up with ease. To build from body it just will be a bit different but of course not too much. So both are valid options.

1 Like
7

Thank you ... there will be a time I understand most of the things down to the smallest detail.
That make perfect sense. As I only put the svg based colour picker there I’ll leave it at the end of the body - to make sure nothing jostle forward.

1 Like
8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.