# Dashboard tips. Simple modal

**URL:** <https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448>\
**Category:** Dashboard\
**Created:** [29 May 2021 14:12 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448 "2021-05-29T14:12:28Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [29 May 2021 14:12 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/1 "2021-05-29T14:12:28Z")

</div>

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.

```auto
[{"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}]

```

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 May 2021 10:53 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/2 "2021-05-30T10:53:47Z")

</div>

**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

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 May 2021 11:03 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/3 "2021-05-30T11:03:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 May 2021 11:14 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/4 "2021-05-30T11:14:44Z")

</div>

> [@Christian-Me](#):
>
> correct places to append the divs (I attached them simply to the body)

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.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 May 2021 11:43 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/5 "2021-05-30T11:43:38Z")

</div>

I was observing how notifications / toaster does the job.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/b/7bc9ab69065d5f2801f6239e0a30ff04daa0f9b2.png)  
This was the only example if found so far

---

<div class="post-metadata">

**Author:** ![hotNipi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hotnipi/32/383_2.png) [@hotNipi](https://discourse.nodered.org/u/hotNipi)\
**Post date:** [30 May 2021 12:16 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/6 "2021-05-30T12:16:40Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![Christian-Me](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/christian-me/32/10774_2.png) [@Christian-Me](https://discourse.nodered.org/u/Christian-Me)\
**Post date:** [30 May 2021 13:38 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/7 "2021-05-30T13:38:15Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [29 June 2021 13:38 UTC](https://discourse.nodered.org/t/dashboard-tips-simple-modal/46448/8 "2021-06-29T13:38:56Z")

</div>

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