Skip to content
Related Articles

Related Articles

Blaze UI Overlays

View Discussion
Improve Article
Save Article
  • Last Updated : 13 Jun, 2022
View Discussion
Improve Article
Save Article

Blaze UI is a free and open-source Framework with a lightweight UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us create a scalable and responsive website quickly and efficiently with a consistent style. 

In this article, we will be seeing Blaze UI Overlay. The overlay component is used in many other components, like modal, to blackout the content of the page. To make use of overlays the c-overlay class is used. By default, the overlays are hidden. To make overlays visible, we can use the c-overlay–visible class.

Syntax:

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

Example 1: In the following example, we have not used the c-overlay class.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
          href=
 
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
     
    <h3>Basic Overlay - Blaze UI</h3>
 
    <div class="u-window-box-super">
        <h2>What is GeeksforGeeks?</h2>
         
<p>
            GeeksforGeeks is a computer science portal
            for geeks around the globe.One can study
            about different topics of Computer Science
            domain and can share his/her knowledge with
            the community to help everyone learn better.
        </p>
 
 
    </div>
    <div class="c-overlay" aria-hidden="true"></div>
</body>
</html>


Output:

Blaze UI Overlays

Blaze UI Overlays

Example 2: In the following example, we have used the c-overlay class with the c-overlay–visible class.

HTML




<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge">
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet"
          href=
 
    <style>
        body {
            font-family: sans-serif;
            text-align: center;
        }
    </style>
</head>
 
<body>
    <h2 style="color:green;">
        GeeksforGeeks
    </h2>
 
    <h3>Basic Overlay - Blaze UI</h3>
 
    <div class="u-window-box-super">
        <h2>What is GeeksforGeeks?</h2>
         
<p>
            GeeksforGeeks is a computer science portal
            for geeks around the globe. One can study
            about different topics of Computer Science
            domain and can share his/her knowledge with
            the community to help everyone learn better.
        </p>
 
 
    </div>
 
    <div class="c-overlay c-overlay--visible"
         aria-hidden="true">
    </div>
</body>
</html>


Output:

Blaze UI Overlays

Blaze UI Overlays

Reference: https://www.blazeui.com/components/overlays/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!