Semantic-UI Modal States

Semantic UI is the open-source framework that used CSS and jQuery to make our websites look beautiful and responsive. It has predefined classes like bootstrap for use to make our website more interactive. It has some pre-built semantic components and we can use these components to create a responsive website.

Semantic UI Modal is used to show the content on the screen that can temporarily block interaction with the main content. We can put any type of content inside the modal. In this article, we will discuss the Modal States in Semantic-UI.

Semantic-UI Modal States Class:

active: This class is used to display the active modal on the page.

Syntax:

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

Example 1: The following code demonstrates the Semantic UI Modal States with some content.

HTML

<!DOCTYPE html>

<html>

<head>

  <title> Semantic-UI Modal States </title>

  <link rel="stylesheet" href=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

</head>
 
<body>

  <div class="ui container center aligned">

    <h2 class="ui green header">

      GeeksforGeeks

    </h2>

    <h3>

      Semantic-UI Modal States

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

      <div class="header">

        This is active modal.

      </div>

      <h3 class="header">

        A Computer Science portal for geeks.

      </h3>

    </div>

  </div>

</body>
 
</html>

Output:

Semantic-UI Modal States

Example 2: The following code demonstrates the Semantic UI Modal States with an image and content.

HTML

<!DOCTYPE html>

<html>

<head>

  <title> Semantic-UI Modal States </title>

  <link rel="stylesheet" href=

"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />

</head>
 
<body>

  <div class="ui container center aligned">

    <h2 class="ui green header">

      GeeksforGeeks

    </h2>

    <h3>

      Semantic-UI Modal States

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

      <div class="header">

        GeeksforGeeks Active modal

      </div>

      <div class="image content">

        <img class="image" src=

"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png">

        <div class="description">

          <h3> About GeeksforGeeks </h3>

<p>

            A Computer Science portal for geeks. 

            It contains well written, well thought

            and well explained computer science and

            programming articles.

          </p>
 
        </div>

      </div>

    </div>

  </div>

</body>
 
</html>