Open In App

Semantic-UI Modal Active State

Improve
Improve
Like Article
Like
Save
Share
Report

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing. Semantic UI Modal displays content above the screen that temporarily blocks interaction with the main view of the site. We need to act according to the details provided by the modal. Semantic-UI Modal Active State is used for setting whether an active modal is visible on the page or not.

Semantic-UI Modal Active State class:

  • UI active modal: This class is used for setting whether an active modal is visible on the page or not.

Syntax: 

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

Example: The below example illustrates the Semantic-UI Modal Active State.

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=
        rel="stylesheet" />
    </script>
    <script src=
    </script>
    <style>
        .icon {
            margin: 16px;
        }
    </style>
</head>
  
<body>
    <div class="ui container">
        <center>
            <div class="ui header green">
                <h1>
                    GeeksforGeeks
                </h1>
            </div>
            <strong> Semantic-UI Modal Active State </strong>
        </center>
  
        <div class="ui segment">
            <div class="ui active modal"></div>
            <h1>Welcome to GeeksforGeeks</h1>
  
            <p>Find the best programming tutorials here.</p>
  
            <button class="ui button green" onclick="openModal()">
                Open Modal
            </button>
            <div class="ui modal">
                <div class="header">
                    Welcome to GeeksforGeeks
                </div>
                <div class="content">
                    <ul>
                        <li>Data Structures</li>
                        <li>Algorithms</li>
                        <li>Machine Learning</li>
                    </ul>
                    <br />
                </div>
                <div class="actions">
                    <div class="ui red cancel button">
                        <i class="close icon"></i> Close
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const openModal = () => {
            $('.ui.modal').modal('show')
        }
    </script>
</body>
  
</html>


Output:

Reference link: https://semantic-ui.com/modules/modal.html#active



Last Updated : 29 Mar, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads