A tiny modal in Mithril
Tags: webdev, mithril
Published: 2020-11-05 12:47:55

Here is a very simple modal implementation with Mithril.

You can test it here [SimpleModal](https://flems.io/#0=N4IgtglgJlA2CmIBcAWArAOgEwDYA0IAxgPYB2AzsQskVbAIYAO58UIBAZhAucgNqhS9MIiQgMACwAuYWO1qkp8RTQA8UCADcABNAC8AHXDEo9WEYB8qgPQbNFg6VUAjAK5SpZbWUKwIhAGtDEABlKXolDGJGZQARCDNiAHMACgByUmJXTXh6d3g0gEpLAElSDmJtAAliERs3DzIHJwbPUm9SX38gozCI+CiY0njE1LSEJLMiywA5eAB3cnr3NuaXFa8fP0DgvsjouITYZPSmACdo4nJpkAttAEFnLKllxtJmx0d5FgRCKQgyLwxAAGJBYLAgAC+eEEwlE4gAVrwCCRFMopDRUeQpNoAMJkJSKbR6bTASEAbk+pHxaMUfCMEzMRgAusTtGAMFIzq5sSkAAaObRC7SqCRYCxlCrVWrwGxi5pCgWkQqU0iOGmEqT0kCZbK5fIstkcrk8qT8wXC0XiuaLOXii1KlVUjXo7XnS7kQ0k43c3lK4Ui+WPZ52hXaR2qxzzCCkKDEeYYPbwNnAC2ozVIbRGIx4C0QcgAeSGmY4ZhYufa3iGI2OSRLrk6-zIKQC8AAnoVU5WhUmMOn0WyXXTW23mRae+FIvmi8o2Sb4KqA1iqANayle-3FMVu+yMGdWGd6PMUtuhdC08cWDXkvXGwDSCeuwHe9OhmzS7AWOSs5XIY4-2q5QNn897aCwUi4gw5DkAAsiYZgnqSFr7lIrhnJWL6Fm+47aAA-FmximLA7LwbAAC05ASPGaogD+AaZkYYCkSRRFkRI0BQMo2akABjjwAAHowxBnDiWI4tocFESmFo+Pu-TaLeIHNpomScZ2OHRrG8ZRJ02wBO+wFNg+8A5FuSE7kKEAcNoKQmeinL0GcSTwDiegkipJgDHGYCFOZAbPpOAy+Fc8DXqkToWcKHL7lAh7HiqdH+QBAbJdo56AUKmgQAsilGYhT7CihaHtGAKRGHYOakr49DQZm4GQTVsGkSe0KJQGpXlVoGBMaxm5SJV9KRUKHUgBV7B+f5AZbN0mYbpeoVHMkeBtZNYFSG2CBIEYSj8VIZFmBASSkEgZyHdIRitTh7VlSA5CMPQNHLcA1XQQpBE9WYZHBSwF3LUYkEhUYhSFBWq3sjdjCVWSy0bgS6Ig6tV3aMyp7ChFZ7-lSHJMQ2ZofbAy2SWY25Ut88C-EZQIgFgAAcSAAMxQjCOpwjQfbQfIfVs-jFFUfM7QFRod0MG2mbOMcgSqrxpDdaRbEcbOgv5owIuZpkpALpjgGy1JBVCkJ5AQEZJYQPxrDftYABU2h9G2ujtCr9CEMmlvWDhABeZExpx-GZgAjBb1shEbHTaJ4jDaK7OH3TAMZJGR4f+8CwKMPxgfaAAMsQhARKBxDWVIEjJk8-GR27O4IBwUiZsCi7Con2i1xp0CF0nwIAKTpwAYq4sDEdGUCF2XOFF2d1faH7yed9oVvaD3ffaKPSTSMPO7EDkZwcMc8yZnknjpwAokI4vJuQhAXAvVnaBrrCsKvAbOE7ARJBcDZQF9VDCZmTnOCk4JYHgYEgCEqzy7mYWAj9AjaBIMcM499hSQOfq-WMH9YHfySI-P+WAgE4MARgNAIDrYACEGBQPmNYKsTsjZ2yjjxKkQpZ5E2IkOHEtCdafT6hNIUiCX5ZBQTAr+2gADEHB4CiNEXXYajkkgxl3u4YgkjtAxw0KQOs2hsGp0UU8M4nEzj+1TmBKg0BhE01MYogerdtA0w7oosA9B+JkQsRITMABOHAKc05a0cOw8i31kwFTTGhSgeilHEBjEoM4ddTrL2rk3Oh2seZ+KQFRDeE0S683oHGHejccloAMT-egKRcE4IwCgCKkIyYU3vFTemWAwRQmZAQPwpAAhAgECzEQNBICF1OnIAgaE5BiGkFIZgSBrDWAbIwZ+fZajWG6RIXpAABLAGBgSlLmUbBZ3BuoxgwEieQ60Yg0DPqdRgGJISNI6fCfGhswAq0QJCIAA)

```html
<div id="modal"></div>
<button onclick="State.openDialog('nouveaute')">Info Home</button>
<button onclick="State.openDialog('legal')">News</button>
<button onclick="State.openDialog('apropos')"> About</button>

```

```css
.modal-shown {
  display: block;
}

.modal-hidden {
  display: none;
}

.modal {
    position: fixed; /* Stay in place */
    z-index: 1; /* 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(222,0,0); /* Fallback color */
    background-color: rgba(220,0,0,0.5); /* Black w/ opacity */
}

  /* Modal Content */
.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 960px;
}

.modal-close {
  
  cursor: pointer;
  right:0;
}

.modal-close:hover {
  box-shadow: 0 0 5px rgba(0,0,0,0.4);
}
```

```js
const Content = {};

Content["legal"] = m.trust(`
    <h2>Info Home</h2>
  `
);

Content["nouveaute"] = m.trust(`
    <h2>News</h2>
  `
);

Content["apropos"] = m.trust(`
    <h2>About</h2>
  `
);

window.State = {
  content: "",
  isOpen: false,
  openDialog: function(key){
    State.content = Content[key]
    State.isOpen = true;
    console.log(State.content)
    m.redraw()
  },
  closeDialog: function(){
    State.isOpen = false; 
  }
}

function setClassModal() {
  return  State.isOpen 
    ? "modal modal-shown" 
    : "modal modal-hidden"
}

export const  Modal = {
  oncreate : function(vnode){
    window.onclick = function(event) {
      if (event.target == vnode.dom) {
        State.closeDialog();
        m.redraw(); 
      }
    }
  },

  view: function() {
    return m("div", {class: setClassModal()}, 
      m("div.modal-content", [
        m("div", {
          onclick: State.closeDialog, 
          style:"text-align:right"}, 
        m("span", {class : "modal-close"}, "Close")),
        m("p", {}, State.content),       
      ])
    );
  }
}

m.mount(modal, Modal)
```