Semantic-UI Dimmer Active State

Last Updated : 14 Mar, 2022

Semantic UI is an open-source UI framework that uses CSS and jQuery to enable developers to develop great web experiences faster. It can also be used with other CSS frameworks like Bootstrap.

A Dimmer module is used to make the user focus on specific content and dims the other distractions. In this article, we will be seeing the Dimmer Active State in Semantic UI. An active dimmer will dim its parent container.

Semantic UI Dimmer Active State Classes:

active: This class is used on the dimmer module to make it active.

Syntax:

<div class="ui dimmer active"></div>

Example1: The below example shows a simple active dimmer with dims its parent container.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI - Dimmer Active State</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"/> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
  
    <style> 
        .ui.container { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <div> 
            <h1 style="color:green"> 
                GeeksforGeeks 
            </h1> 
              
            <strong>Semantic UI - Dimmer Active State</strong> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui dimmer active"></div> 
            <p> 
                GeeksforGeeks is a computer science portal  
                for geeks. You can read article on various  
                computer science subjects like Data  
                Structures, Algorithms, DBMS , etc. 
                You can also enroll in courses to get video 
                lectures on various subjects. 
            </p> 
        </div> 
    </div> 
</body> 
  
</html> 

Output:

Example: The below example shows an active dimmer with content.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Semantic UI - Dimmer Active State with Content</title> 
    <link rel="stylesheet" href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"> 
    </script> 
  
    <style> 
        .ui.container { 
            text-align: center; 
        } 
    </style> 
</head> 
  
<body> 
    <div class="ui container"> 
        <div> 
            <h1 style="color:green"> 
                GeeksforGeeks 
            </h1> 
              
            <strong> 
                Semantic UI - Dimmer Active  
                State with Content 
            </strong> 
        </div> 
  
        <div class="ui segment"> 
            <div class="ui dimmer active"> 
                <!-- Dimmer Content -->
                <div class="content"> 
                    <p>Active Dimmer with Content.</p> 
                </div> 
            </div> 
  
            <p> 
                GeeksforGeeks is a computer science  
                portal for geeks. You can read article  
                on various computer science subjects 
                like Data Structures, Algorithms, DBMS,  
                etc. You can also enroll in courses to 
                get video lectures on various subjects. 
            </p> 
        </div> 
    </div> 
</body> 
  
</html> 