Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App

Related Articles

Semantic-UI Modal Active State

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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.


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

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


<!DOCTYPE html>
    <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 src=
        .icon {
            margin: 16px;
    <div class="ui container">
            <div class="ui header green">
            <strong> Semantic-UI Modal Active State </strong>
        <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
            <div class="ui modal">
                <div class="header">
                    Welcome to GeeksforGeeks
                <div class="content">
                        <li>Data Structures</li>
                        <li>Machine Learning</li>
                    <br />
                <div class="actions">
                    <div class="ui red cancel button">
                        <i class="close icon"></i> Close
        const openModal = () => {


Reference link:

My Personal Notes arrow_drop_up
Last Updated : 29 Mar, 2022
Like Article
Save Article
Similar Reads
Related Tutorials