Level: beginner • Mithril.js Version: latest
This is another Modal component based on Vanilla CSS and some very simple Mithril.js code. The modal text is injected her, so the example is quite flexible even though it's so simple. Of course, for a real use case it has to be expanded slightly.
Type | Name | URL |
---|---|---|
script | mithril@latest | https://unpkg.com/mithril@latest |
let showmodal = false
const Modal = {
view: v => [
m('div.modal',
m('div.c1',
m('div.c2', v.attrs.text),
m('button', {onclick: () => showmodal = false}, "OK")
)
)
]
}
const App = {
view: () => [
m('h1', "TEST"),
m('button', {onclick: () => showmodal = true}, "show modal"),
showmodal && m(Modal, {text: "This is a modal"})
]
}
m.mount(document.body, App)
.modal {
position: fixed;
top: 0;
left: 0;
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.8);
display: flex;
justify-content: center;
align-items: center;
}
.c1 {
text-align: center;
padding-bottom: 40px;
width: 200px;
height: 100px;
background: white
}
.c2 {
padding-top: 40px;
margin-bottom: 20px
}
The snippet is using the most current version of Mithril.js framework. It is aimed at beginners and shows some basic recipes.
In addition to the Mithril.js hyperscript function m(), here we can see an example of Mithril.js' m.mount
API method.
The example was contributed by osban and last modified on 24 September 2020. Click here to see more examples contributed by the author.
If anyone has some improvements, that should be addressed, let me know by opening an issue. Or simply fork the repository on GitHub, push your commits and send a pull request. For starting your work, you can click the edit link below. Thanks for contributing.