Bulma | Modal

Bulma is a free and open-source CSS framework based on Flexbox. It is component rich, compatible, and well documented. It is highly responsive in nature. It uses classes to implement its design.

The Modal is a classic overlay in which one can include any content. The Modal component is a dialog box/popup window that is displayed on top of the current page once the trigger button is clicked. The ‘modal’ component includes several other components that can be added to design the content. These components are listed below:

• modal-background: It is the transparent overlay that acts as a click target to close the modal.
• modal-content: It is the container with a maximum width of '640px'. This container shows the content of the model class.
• modal-close: It is the 'cross' located in the top right corner which used to close the modal.

Example 1:

Output:

Example 2: Login form modal.

Output:

Example 3: Modal to show twitter messages.

Output: