Three ways to create a modal dialog

Today, we are going to look at three ways to add a modal dialog to your app.  The first option just uses CSS and JavaScript (no special libraries).  The second option uses Bootstrap (a topic that I haven’t touched in a few years).  The third and final option uses Bulma.  I looked back at my previous posts and don’t think that I have covered this, yet.  I am purposely trying to keep the three examples as similar to each other as possible.  There is a button that opens the modal and you can close it by either clicking on the space outside of the modal or on the X in the corner of it.

Plain JavaScript and CSS

See the Pen
Modals 1: Using CSS and JavaScript
by Joe Steinbring (@steinbring)
on CodePen.

Our first option is pretty simple.  The javascript is mainly there to handle closing the dialog when the user clicks outside of it.  The code to open and close it is handled inline with onclick events.  The CSS has a modal class that handles the background and a model-content class to handle the actual modal.

Bootstrap

See the Pen
Modals 2: Using Bootstrap
by Joe Steinbring (@steinbring)
on CodePen.

Our second option has no javascript or CSS defined, because we are including the bootstrap library and it handles it all for you.

Bulma

See the Pen
Modals 3: Using Bulma
by Joe Steinbring (@steinbring)
on CodePen.

Our third option is sort of in-between the first two.  Since Bulma is only a CSS framework and doesn’t include any of the javascript fanciness that bootstrap has, we need to handle the opening and closing of the modal, ourselves.

So, which is my favorite of the three?  I definitely prefer the third option but which one you should use all depends on your situation at the time.

 

[ Cover photo by Headway on Unsplash ]

Leave a Reply

Your email address will not be published.