Hit enter after type your search item

The Modal component in Bulma

The Bulma modal component enables you to overlay a small element over the website. The modal component may contain any content that is required – simple text, buttons, form, images etc.

How to create modal in Bulma?

The example below creates a basic modal with text content and an option to close the modal overlay. Have a look and then it is explained how it is created:

bulma modal

See online demo and code

The modal structure consists of four elements:
  • modal : This is the main container. In the above example, this is the first div element.
  • modal-background: This is a transparent overlay. You may customize this by using the available variables (using Sass). This overlay can also be used to enable the users closing the modal window.
  • modal-content: This is where the modal content is placed. You may place text, images, buttons etc. there.
  • modal-close: A close button on the top right corner.

The example of closing the modal by button

In the above example, there is only one option to close the modal i.e. using the top-right cross button. In this example, we have a “Close Modal” button within the content of the modal. I also added two more buttons just for the demo:

bulml modal close

See online demo and code

You should notice the JavaScript section as well. There we dealt with closing the modal upon clicking the button. See this:

Display the modal as web page loads example

The above two examples load the modal as you click on the button. You may want to display the modal as the web page loads. In that case, just place the “Launch Modal” button code in the document.ready function of jQuery and you are done.

The example below shows how! Just open the example page and you will see the modal:

See online demo and code

This is the jQuery code used in the demo for loading the modal on page load.

The rest of the code is the same as in the above example.

An example of image modal

The modal can be used for creating image galleries as well. The example below displays a modal with a full-sized image:

See online demo and code

The code:

A modal with head, body, and foot

Use the modal-card class for creating a modal with header, body, and footer. The head part generally contains the headline. The body contains the content like text/images while the footer section may contain the actionable buttons/links etc.

The example below shows a modal with all these sections:

bulma modal card

See online demo and code

The code:

Creating various effects in Bulma modal by a plug-in

As Bulma getting popularity, the plug-ins are starting available to enhance or extend the available features. One such plug-in is “Bulma Modal fx” that can be used for creating modals with CSS transitions and animations easily.

The plug-in is available to download here (in GitHub).

An example of fadeInScale effect modal

As you click the “Launch Modal with effect” button, it opens the modal with fadeInScale effect. See the complete code with CDN links in the demo page:

See online demo and code

The code:

The example of newspaper effect

Use the value newsPaper for its effect as in the demo below:

See online demo and code

The code:

<div id=”modal-newsPaper-fs” class=”modal modal-fx-newsPaper”>

You only need to change the value in a div as shown in the above line.

Other effect values

Similarly, you may use other values for a specific effect as listed below:

  • normal
  • slideRight
  • lideLeft
  • slideTop
  • slideBottom
  • fall
  • sideFall
  • 3dFlipVertical
  • 3dFlipHorizontal
  • 3dSign
  • 3dSignDown
  • superScaled
  • 3dSlit
  • 3dRotateFromBottom
  • 3dRotateFromLeft

See live demo in this page for all these effects and more info.

This div height required for enabling the sticky sidebar