Modal with Bulma II

26 October 2021 by mike-ward

Level: beginner • Mithril.js Version: latest

bulma m.mount m.render modal vnode

This example seems to be the same as here and will be deleted from this repo soon.

Live Example #

TypeScript #

function 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);
}

JavaScript #

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)

As a prerequisite for this snippet, the latest version of Mithril.js framework is required. Beginners should have no problems following this example, that simply shows some basic recipies.

Here we can see use cases of different Mithril.js API methods like m.render or m.mount, besides the centrepiece m() hyperscript function. Also covered in this example is the use of Vnodes or virtual DOM nodes, a JavaScript data structure that describes a DOM tree.

The example was written by mike-ward, last edits were made on 26 October 2021.

Contribute #

Did you note a typo or something else? So let me know by opening an issue. Or much better: just fork the repository on GitHub, push your commits and send a pull request. Ready to start your work? Then click on the edit link below. Thanks in advance!

See more code examples  •  Edit this example on GitHub