Skip to content
Related Articles

Related Articles

Semantic-UI Modal States

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Apr, 2022
View Discussion
Improve Article
Save Article

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=
</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=
</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=
        <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>


Output:

Semantic-UI Modal States

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!