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.