Blaze UI Ghost 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. It project is available open-source so a large community maintains it.

Blaze UI Modal is used to show the structured content in the form of cards. Blaze UI Ghost Modal is used to create the modal without the body with some content inside it using the o-modal–ghost class. In this article, we will discuss Blaze UI Ghost Modal.

Blaze UI Ghost Modal Class:

o-modal–ghost: This class is used as a modifier class to create the ghost modal.

Syntax:

<div aria-hidden class="c-overlay 
    c-overlay--visible">
</div>

<div role="dialog" class="o-modal o-modal--ghost 
   o-modal--visible">
   ....
</div>

Example 1: The following example demonstrates the Blaze UI Ghost Modal.

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
  <title> Blaze UI Ghost 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 Ghost Modal </h3> 
  
        <div aria-hidden class="c-overlay  
          c-overlay--visible"> 
        </div> 
        <div role="dialog" class="o-modal o-modal--ghost  
             o-modal--visible"> 
            <div class="c-card"> 
                <header class="c-card__header"> 
                  <h2 class="c-heading"> 
                    GeeksforGeeks Ghost Modal 
                  </h2> 
                </header> 
          
                <div class="c-card__body"> 
                  A Computer Science portal for geeks. 
                </div> 
            </div> 
        </div> 
    </div> 
</body> 
  
</html>

Output:

Blaze UI Ghost Modal

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

HTML

<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <title> Blaze UI Ghost 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 Ghost Modal </h3> 
  
        <div aria-hidden class="c-overlay  
          c-overlay--visible"> 
        </div> 
        <div role="dialog" class="o-modal o-modal--ghost  
             o-modal--visible"> 
            <div class="c-card"> 
                <header class="c-card__header"> 
                  <h2 class="c-heading"> 
                    GeeksforGeeks Ghost 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>