Semantic-UI Simple Dimmer Variation

Last Updated : 01 Mar, 2022

Semantic UI is a modern framework used in developing seamless designs for the website. It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks.

Semantic UI Dimmer is used to hide the distractions or site content and move focus to the main content. It can be used to view important updates or notifications.

Semantic UI Simple Dimmer Variation is used to control a dimmer without javascript. The dimmer can be controlled using the parent container class.

Semantic UI Simple Dimmer Variation Classes:

simple dimmer: It is used to display dimmer without javascript.

Syntax: Add the class simple to the dimmer container. Then the parent class should be ui dimmable dimmed.

<div class="ui dimmable dimmed segment" id="gfgdimmer">
    ...
    <div class="ui simple dimmer">
        ...
    </div>
    ...
</div>

Example: In the following example, we will create a simple dimmer on the container.

HTML

<!DOCTYPE html> 
<html> 
  
<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 href= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css"
        rel="stylesheet" /> 
    <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src= 
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js"> 
    </script> 
</head> 
  
<body> 
    <div class="ui container"> 
        <center> 
            <div class="ui header green"> 
                <h1>GeeksforGeeks</h1> 
            </div> 
  
            <strong> 
                Semantic UI Simple Dimmer Variation 
            </strong> 
        </center> 
  
        <div class="ui dimmable dimmed segment" id="gfgdimmer"> 
            <div class="ui simple dimmer" id="dimmer"> 
                <div class="content"> 
                    <h3>Welcome to GeeksforGeeks</h3> 
                    <br /> 
                    <button class="ui red button" 
                        onclick="hideDimmer()"> 
                        Hide 
                    </button> 
                </div> 
            </div> 
            <div class="content"> 
                <h1>Welcome to GeeksforGeeks</h1> 
                <p>Find the best programming tutorials here.</p> 
                <button class="ui green button" 
                    onclick="showDimmer()"> 
                    Show 
                </button> 
            </div> 
        </div> 
    </div> 
      
    <script> 
        const showDimmer = () => { 
            $('#gfgdimmer').dimmer('show') 
        } 
        const hideDimmer = () => { 
            $('#gfgdimmer').dimmer('hide') 
        } 
    </script> 
</body> 
  
</html>