Blaze UI Modals

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.

Blaze UI Modals are created to popup some important updates or details of some new event. Modals draw the attention of the users immediately as the modal hides the main content of the webpage. Either the user has to take action or dismiss it depending on the modal.

• Blaze UI Modals Attributes: In Blaze UI modals there are 4 different attributes that play different roles for modals
• Blaze UI Modals Methods: There are three different methods that work on modals that is show, close, and isOpen.
• Blaze UI Modal Types: There 4 types of modals in Blaze Ui Modals Basic Modal, Ghost Modal, Scrollable.

Syntax: Create a modal as follows:

<blaze-modal open dismissible>
 <!-- Content -->
</blaze-modal>

Example 1: In the following example, we have a simple modal in our webpage that opens or closes with a button click.

Output:

👁 Image

Example 2: In the following example, we have a full-screen modal.

Output:

👁 Image

Example 3: In the following example, we are going to create a ghost modal. A ghost modal does not have any background or transparent background.

Output:

👁 Image

Reference: https://www.blazeui.com/objects/modals/