Here is a very simple modal implementation with Mithril.
You can test it here SimpleModal
<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>
.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); }
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)