# How to show modal dialog in template node

**URL:** <https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611>\
**Category:** Dashboard\
**Created:** [5 June 2018 02:37 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611 "2018-06-05T02:37:24Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![tomasinouk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomasinouk/32/442_2.png) [@tomasinouk](https://discourse.nodered.org/u/tomasinouk)\
**Post date:** [5 June 2018 02:37 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/1 "2018-06-05T02:37:24Z")

</div>

Hi guys, I would like to show modal dialog via template node. I have couple of inputs and want to show modal dialog, when user submit values, to confirm what will happen.  
Thank you for a help.

Content of my template node:

```
<md-input-container>
    <label>SSID</label>
    <input name="retention_duration" ng-model="msg.payload.wifi.ssid" required >
    <md-tooltip md-direction="top">SSID can be anything</md-tooltip>
</md-input-container>
<md-input-container>
    <label>Password</label>
    <input name="retention_duration" ng-model="msg.payload.wifi.key" required type="test" min="8" >
    <md-tooltip md-direction="top">At least 8 characters is required</md-tooltip>
</md-input-container>

<md-input-container>
 <md-button class="md-raised" ng-click="clicked(); send(msg)"
 ng-disabled="!(msg.payload.wifi.ssid > 1) || !(msg.payload.wifi.key.length >= 8)">
Submit
 </md-button>
</md-input-container>
```

---

<div class="post-metadata">

**Author:** ![dceejay](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/dceejay/32/38_2.png) [@dceejay](https://discourse.nodered.org/u/dceejay)\
**Post date:** [5 June 2018 06:32 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/2 "2018-06-05T06:32:54Z")

</div>

can you not use the existing ui\_notify node ?

---

<div class="post-metadata">

**Author:** ![tomasinouk](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tomasinouk/32/442_2.png) [@tomasinouk](https://discourse.nodered.org/u/tomasinouk)\
**Post date:** [5 June 2018 07:55 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/3 "2018-06-05T07:55:56Z")

</div>

@dceejay valid point, trying to avoid changing a lot of code as ui\_notify needs string in a payload and my whole application is carry all data in payload ☹ so kinda was hoping to just implement something like in bootstrap [https://www.w3schools.com/bootstrap/bootstrap\_ref\_js\_modal.asp](https://www.w3schools.com/bootstrap/bootstrap_ref_js_modal.asp)

---

<div class="post-metadata">

**Author:** ![tree-frog](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/tree-frog/32/89303_2.png) [@tree-frog](https://discourse.nodered.org/u/tree-frog)\
**Post date:** [25 July 2018 19:31 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/4 "2018-07-25T19:31:52Z")

</div>

the Dashboard "Notification" does not allow for user to type in an input text box as a response, Just OK/Cancel. Can you please update the "Notification" such that it allows for a pull down pick, or type in the answer.

---

<div class="post-metadata">

**Author:** ![shrickus](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/shrickus/32/517_2.png) [@shrickus](https://discourse.nodered.org/u/shrickus)\
**Post date:** [25 July 2018 23:48 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/5 "2018-07-25T23:48:07Z")

</div>

I believe you can add a plain javascript function to your send function (well, you'll have to create one first -- it looks like you are currently using the angular `scope.send(...)`).

```auto
<md-button class="md-raised" ng-click="clicked(); sendMsg(msg)"

```

Then in your sendMsg function, make sure they really want to continue before sending:

```auto
function sendMsg(msg) {
    if (confirm("Are you nuts?!?")) {
        $scope.send(msg);
    }
    else {
        console.warn("Whew! Crisis averted...");
    }
}

```

---

<div class="post-metadata">

**Author:** ![ArtReaktor](https://avatars.discourse-cdn.com/v4/letter/a/7993a0/32.png) [@ArtReaktor](https://discourse.nodered.org/u/ArtReaktor)\
**Post date:** [18 September 2018 13:55 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/6 "2018-09-18T13:55:07Z")

</div>

Hi guys!  
I have same question: I need to show configuration form to set pump and light timers.  
The idea is to put the form into mdDialog: you click settings button which opens a dialog. Seems like ui\_notify is unable to do so.  
My dashboard is a custom ui\_template, I try to keep it light and clean, as I have ten "Units" (shelvings where I grow plants, each has it's own grow settings) and don't like the idea to have 50 inputs on one page.  
I tried to implement a custom dialog as described here [https://material.angularjs.org/latest/demo/dialog](https://material.angularjs.org/latest/demo/dialog),  
but mdDialog object is not available in ui\_template scope (why???).  
According to [https://github.com/node-red/node-red-dashboard/blob/master/src/main.js](https://github.com/node-red/node-red-dashboard/blob/master/src/main.js) (line 60 atm) the mdDialog object is passed into app.controller constructor..  
So, is there a way to invoke mdDialog in ui\_template? If not, what would you suggest instead?

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [15 November 2018 13:49 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/7 "2018-11-15T13:49:32Z")

</div>

am trying to do the same thing. have u find a solution ???

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [15 November 2018 17:35 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/8 "2018-11-15T17:35:09Z")

</div>

Hi @ArtReaktor and @hathemi, possibly others,

Here's a basic modal that forgoes md-dialog for a plain js modal:

```auto
<style>
body {font-family: Arial, Helvetica, sans-serif;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    opacity:0.99;
    z-index: 100; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

/* Modal Content */
.modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    padding: 0;
    border: 1px solid #888;
    width: 50%;
    box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
    -webkit-animation-name: animatetop;
    -webkit-animation-duration: 0.4s;
    animation-name: animatetop;
    animation-duration: 0.4s
}

/* Add Animation */
@-webkit-keyframes animatetop {
    from {top:-300px; opacity:0} 
    to {top:0; opacity:1}
}

@keyframes animatetop {
    from {top:-300px; opacity:0}
    to {top:0; opacity:1}
}

/* The Close Button */
.close {
    color: white;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: #000;
    text-decoration: none;
    cursor: pointer;
}

.modal-header {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}

.modal-body {padding: 2px 16px;}

.modal-footer {
    padding: 2px 16px;
    background-color: #5cb85c;
    color: white;
}
</style>

<!-- Trigger/Open The Modal -->
<button id="myBtn">Open Modal</button>

<!-- The Modal -->
<div id="myModal" class="modal">

  <!-- Modal content -->
  <div class="modal-content">
    <div class="modal-header">
      <span class="close">&times;</span>
      <h2>Modal Header</h2>
    </div>
    <div class="modal-body">
      <p>Some text in the Modal Body</p>
      <div>
        Qty of silly hats
  <input type="number" ng-model="msg.payload" name="quantity" min="0" max="1000">
  <md-button ng-click="send(msg)">Click to send to Node-Red</md-button>
</div>
    </div>
    <div class="modal-footer">
      <h3>Modal Footer</h3>
    </div>
  </div>

</div>

<script>
    // Get the modal
var modal = document.getElementById('myModal');

// Get the button that opens the modal
var btn = document.getElementById("myBtn");

// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];

// When the user clicks on the button, open the modal 
btn.onclick = function() {
    modal.style.display = "block";
}

// When the user clicks on <span> (x), close the modal
span.onclick = function() {
    modal.style.display = "none";
}

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
    if (event.target == modal) {
        modal.style.display = "none";
    }
}
</script>

```

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [15 November 2018 18:30 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/9 "2018-11-15T18:30:03Z")

</div>

Thank you very much for reply 😊.

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [16 November 2018 14:59 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/10 "2018-11-16T14:59:22Z")

</div>

I updated the modal code two posts above, adding a "slide from top" intro, Header and footer sections.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [19 November 2018 11:20 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/11 "2018-11-19T11:20:44Z")

</div>

Hi there. what if i want to send multiple data in ng-click="send()"???

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [19 November 2018 14:19 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/12 "2018-11-19T14:19:02Z")

</div>

You could do something like:

```auto
<input type="number" ng-model="msg.payload.data1" name="quantity1" min="0" max="1000">
<input type="number" ng-model="msg.payload.data2" name="quantity2" min="0" max="1000">
  <md-button ng-click="send(msg)">Click to send to Node-Red</md-button>
```

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [19 November 2018 16:02 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/13 "2018-11-19T16:02:28Z")

</div>

thank you very very much. actually i did figure out a solution like this

```
  <h3>Nom : </h3><input type="text" ng-model="msg4.payload" id="name" name="Nom" placeholder="Nom" required size="77"><br><br>
  <h3>Prenom : </h3><input type="text" ng-model="msg2.payload" id="prenom" name="Prenom" placeholder="Prenom" required size="77"> <br><br>
  <md-button class="md-accent" ng-click="send({payload : {msg4, msg2} })" ng-disabled="(msg4.payload == null) || (msg2.payload == null)">Enregistrer</md-button>

```

but your solution is much better, because i can store my data in .csv file. THANK YOU.

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [20 November 2018 11:08 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/14 "2018-11-20T11:08:50Z")

</div>

Hi there it's me again.  
when i test modal i find that i can only send data once. i cannot save another one only if i deploy the project.  
any idea PLEASE.?

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [20 November 2018 21:12 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/15 "2018-11-20T21:12:50Z")

</div>

i think that ng-click send msg without reseting the value of msg!!! how can i reset it ?? i tried ths ng-click="send(msg);msg={}" but it doest work

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [21 November 2018 17:11 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/16 "2018-11-21T17:11:57Z")

</div>

You can inject a msg with some empty strings (ex: msg.payload.data1 = "") in the input of the ui\_template,

---

<div class="post-metadata">

**Author:** ![hathemi](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hathemi/32/3792_2.png) [@hathemi](https://discourse.nodered.org/u/hathemi)\
**Post date:** [23 November 2018 08:36 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/17 "2018-11-23T08:36:36Z")

</div>

thanks for replay. what i did is i empty the msg inside a function after adding in a file and return it to template.

---

<div class="post-metadata">

**Author:** ![martinschki](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/martinschki/32/737_2.png) [@martinschki](https://discourse.nodered.org/u/martinschki)\
**Post date:** [24 November 2018 18:42 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/18 "2018-11-24T18:42:38Z")

</div>

would there be an easy way to add a onscreen numerical keypad?  
This would be awesome to do a pin code check or numerical input for any sort of buttons/operations...

---

<div class="post-metadata">

**Author:** ![hugobox](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/hugobox/32/2948_2.png) [@hugobox](https://discourse.nodered.org/u/hugobox)\
**Post date:** [26 November 2018 14:52 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/19 "2018-11-26T14:52:29Z")

</div>

You could add in the modal your buttons with number 0 -9 as strings that add a character to the payload, then have a Delete button that slices the last character and finally your Validate button to send back to NR. :

```auto
<div>
       PIN
        <md-button ng-click="msg.payload = msg.payload + '1'">1</md-button>
        <md-button ng-click="msg.payload = msg.payload + '2'">2</md-button>
        <md-button ng-click="msg.payload = msg.payload + '3'">3</md-button>
        <md-button ng-click="msg.payload = msg.payload + '4'">4</md-button>
        <md-button ng-click="msg.payload = msg.payload + '5'">5</md-button>
        <md-button ng-click="msg.payload = msg.payload + '6'">6</md-button>
        <md-button ng-click="msg.payload = msg.payload + '7'">7</md-button>
        <md-button ng-click="msg.payload = msg.payload + '8'">8</md-button>
        <md-button ng-click="msg.payload = msg.payload + '9'">9</md-button>
        <md-button ng-click="msg.payload = msg.payload.slice(0,-1)">DEL</md-button>
  <input type="text" ng-model="msg.payload" name="pin">
  <md-button ng-click="send(msg)">Validate</md-button>
</div>
```

---

<div class="post-metadata">

**Author:** ![Techserv-krY](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/techserv-kry/32/8255_2.png) [@Techserv-krY](https://discourse.nodered.org/u/Techserv-krY)\
**Post date:** [9 May 2019 11:35 UTC](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611/20 "2019-05-09T11:35:52Z")

</div>

Thanks for your example.  
unfortunately I still have the problem. If I use it several times in the same Dashboard Tab, even if I change the id= for everyone that it always opens the same modal.  
first modal

```auto
<!-- Trigger/Open The Modal -->
<button id="first">Open Modal</button>

<!-- The Modal -->
<div id="firstModal" class="modal">
    // Get the modal
var modal = document.getElementById('firstModal');

// Get the button that opens the modal
var btn = document.getElementById("fisrt");

```

second

```auto
<!-- Trigger/Open The Modal -->
<button id="second">Open Modal</button>

<!-- The Modal -->
<div id="secondModal" class="modal">

    // Get the modal
var modal = document.getElementById('secondModal');

// Get the button that opens the modal
var btn = document.getElementById("second");

```

etc

[Next page](https://discourse.nodered.org/t/how-to-show-modal-dialog-in-template-node/611.md?page=2)