Blaze UI Basic Modal

Last Updated : 25 Apr, 2022

Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit and 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 Basic Modal is used to show the structured content in form of cards. We can use the c-overlay class to fill the current space on the page. We can put any type of content inside the modal to show the information. In this article, we will discuss Blaze UI Basic Modal.

Blaze UI Basic Modal Classes:

o-modal: This class is used to create the modal.
o-modal–visible: This class is used to show the modal on the page.
c-overlay: This class is used to fill the current space on the page.

Syntax:

<div aria-hidden class="c-overlay c-overlay--visible"></div>
<div role="dialog" class="o-modal o-modal--visible">
      ...
</div>

Example 1: The following example demonstrates the Blaze UI Basic Modal with some text.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Basic Modal </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;"> GeeksforGeeks </h1> 
        <h3> Blaze UI Basic Modal </h3> 
  
        <div aria-hidden class="c-overlay c-overlay--visible"></div> 
        <div role="dialog" class="o-modal o-modal--visible"> 
            <div class="c-card"> 
                <header class="c-card__header"> 
                    <h2 class="c-heading"> 
                        GeeksforGeeks Basic Modal 
                    </h2> 
                </header> 
          
                <div class="c-card__body"> 
                    A Computer Science portal for geeks. 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Basic Modal

Example 2: The following example demonstrates the Blaze UI Basic Modal with an image and buttons.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Basic Modal </title> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
  
<body> 
    <div class="u-centered"> 
        <h1 style="color: green;"> GeeksforGeeks </h1> 
        <h3> Blaze UI Basic Modal </h3> 
  
        <div aria-hidden class="c-overlay c-overlay--visible"></div> 
        <div role="dialog" class="o-modal o-modal--visible"> 
            <div class="c-card"> 
                <header class="c-card__header"> 
                    <h2 class="c-heading"> 
                        GeeksforGeeks Basic Modal 
                    </h2> 
                    <h4> GeeksforGeeks Image </h4> 
                </header> 
          
                <div class="c-card__body"> 
                    <img src= 
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png" alt=""> 
                </div> 
  
                <footer class="c-card__footer"> 
                    <button type="button" 
                            class="c-button c-button--error"> 
                        Cancel 
                    </button> 
  
                    <button type="button" 
                            class="c-button c-button--success"> 
                        Submit 
                    </button> 
                </footer> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>