Bulma: Modal window component

Created on 2 Feb 2016  路  12Comments  路  Source: jgthms/bulma

Hey, this project looks great.

Just a suggestion for a new component: modal windows. This is the components I use the most in twitter bootstrap and like me many people so it would be great to have one in bulma. It should have a header with a title and an optional close icon, a body and a footer with buttons.

PS: awesome project

feature

Most helpful comment

:+1: on having a model separate from the JS framework. I'd rather not be forced to use a particular front-end framework just to get a modal window!

All 12 comments

looking for this feature which makes me to use this framework in the upcoming project of ours.

JavaScript plugins are coming up. I could design a modal, but without the JS interaction, it might be useless. So it's on hold for now, but in the pipelines.

Need to have a directive for Angular JS also !

@jgthms well, it's not necessary useless because some people (like me) could use only the CSS and then add the behavior using another framework. For example for bootstrap there's the official JS implementation using jquery but there are others using react or vuejs.

In other projects I've used bootstrap components without the official javascript and I've just added/removed the proper css classes to open dropdowns, menus, show/hide tabs, etc. myself without using the official jquery implementation because I was using a different framework.

:+1: on having a model separate from the JS framework. I'd rather not be forced to use a particular front-end framework just to get a modal window!

An opinion about modal windows:

  • Breaks the UI/IUX
  • Anything possible to do inside a modal is just possible to do in the main layout (And will result in a much better flow for the user)
  • Using a modal window is failing as a designer
  • I hate them

Do you want include them in the project? Ok, but just the CSS as @jgthms says, or at least dont add JS dependency.

I would also suggest to make elements for:

  • Floating window with darked background
  • Panel
  • Panel Header
  • Panel Footer

And then, the modal window would be a combination of them.

I would repeat @3noch comment!

:+1: for having the CSS separate from the JS that runs it!

+1 for just having the CSS, but with proper classes for animations and transition states

+1 @3noch

Modals have been added. As wished, you have to handle the show/hide yourself. But it's just toggling 1 CSS class.

Yay!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

bigZ-again picture bigZ-again  路  3Comments

NurdinDev picture NurdinDev  路  3Comments

JenCant picture JenCant  路  3Comments

fundon picture fundon  路  3Comments

guillecro picture guillecro  路  3Comments