Level: beginner • Mithril.js Version: latest
bulma dialog m.mount m.render modal vnode
Here is an elegant example for a modal solution using Bulma CSS framework. The modal is created and rendered separately by using a simple utility function. It is then appended to the HTML body which ensures that the modal is always on top of everything. So simple, nice!
| Type | Name | URL |
|---|---|---|
| script | mithril@latest | https://unpkg.com/mithril@latest |
Mithril.js by Examplesfunction modal(content: string | m.Vnode) {
const view =
m('.modal is-active',
m('.modal-background', { onclick: () => modalContainer.remove() }),
m('.modal-content', m('.box', content)));
const modalContainer = document.createElement('div');
document.body.appendChild(modalContainer);
m.render(modalContainer, view);
}
const modalContent =
m('.title.has-text-centered', 'Title',
m('.subtitle', 'some content here'));
const app = {
view: () => m('.section',
m('button.button.subtitle',
{ onclick: () => modal(modalContent) },
'Show Modal')
)
}
m.mount(document.body, app)
<!doctype html>
<html lang=en>
<head>
<meta charset=utf-8>
<title>Modal</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bulma@0.9.3/css/bulma.min.css">
</head>
<body>
</body>
</html>
The snippet requires the latest version of Mithril.js framework. It is ideal for beginners showing some basic recipes.
In this example we can see some Mithril.js API methods like m.render or m.mount, besides Mithril.js' basic m() hyperscript function.
We can also see the usecase of virtual DOM nodes (Vnodes) that is a JavaScript data structure describing a DOM tree.
The code sample was authored by spacejack. It was last modified on 16 October 2021. Want to see more examples written by spacejack? Then Click here.
Do you see some improvements, that could be addressed here? Then let me know by opening an issue. As an alternative, you can fork the repository on GitHub, push your commits and send a pull request. To start your work, click on the edit link below. Thank you for contributing to this repo.