Skip to content
Related Articles

Related Articles

Semantic-UI Popup Variations

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 Popup is used to show some extra information to the user. In this article, we will discuss Popup Variations in Semantic-UI.

Semantic-UI Popup Variations:

  • Basic: This variation is used to create a basic popup.
  • Width: This variation is used to set the width of the popup.
  • Fluid: This variation takes the entire width of the offset container.
  • Size: This variation is used to set the size of the popup.
  • Flowing: This variation has no maximum width.
  • Inverted: This variation has its color inverted.

Semantic-UI Popup Variations Classes:

  • basic: This class is used to create a basic popup.
  • wide: This class is used to create a wide popup.
  • very wide: This class is used to create a very wide popup.
  • fluid: This class is used to create an entire width popup.
  • mini: This class is used to create a mini-size popup.
  • tiny: This class is used to create a tiny size popup.
  • small: This class is used to create small size popup.
  • large: This class is used to create large size popup.
  • flowing: This class is used to create a flowing popup.
  • inverted: This class is used to create a color inverted popup.

Syntax:

<div class="ui icon button" 
     data-content="" 
     data-variation="Popup-Variations-Class">
  <i class="add icon"></i>
</div>

Example 1: The following code demonstrates the Semantic-UI Popup Basic, Width, and Fluid Variations.

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title> Semantic-UI Popup Variations </title>
  <link href=
      rel="stylesheet"/>
 
  <script src=
  </script>
  <script src=
  </script>
</head>
 
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2
    <h3> Semantic-UI Popup Variations </h3>
   
    <strong>
      Basic:
    </strong> <br>
    <div class="ui icon button"
        data-content="GeeksforGeeks"
        data-variation="basic">
      <i class="cloud download icon"></i>
    </div> <br> <br>
 
    <strong>
      Width:
    </strong> <br>
    <i class="circular play icon link"
      data-content=
      "A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science"
      data-variation="wide">
    </i>
 
    <i class="circular play icon link"
      data-content=
      "A Computer Science portal for geeks.
        It contains well written, well thought
        and well explained computer science"
      data-variation="very wide">
    </i> <br> <br>
 
    <strong>
      Fluid:
    </strong> <br>
    <div class="ui button">
      Fluid Popup
    </div>
    <div class="ui fluid popup">
    <div class="ui three column divided
            center aligned grid">
      <div class="column">GFG 1</div>
      <div class="column">GFG 2</div>
      <div class="column">GFG 3</div>
    </div>
  </div>
  
  <script>
    $('.icon').popup({});
    $('.button').popup({});
  </script>
</body>
</html>


Output:

Example 2: The following code demonstrates the Semantic-UI Popup Size, Flowing, and Inverted Variations

HTML




<!DOCTYPE html>
<html>
 
<head>
  <title> Semantic-UI Popup Variations </title>
  <link href=
      rel="stylesheet"/>
 
  <script src=
  </script>
  <script src=
  </script>
</head>
 
<body>
  <div class="ui container center aligned">
    <h2 class="ui green header"> GeeksforGeeks </h2
    <h3> Semantic-UI Popup Variations </h3>
   
    <strong>
      Size:
    </strong> <br>
    <i class="circular play icon link"
       data-content="GeeksforGeeks Mini"
       data-variation="mini">
    </i>
    <i class="circular play icon link"
       data-content="GeeksforGeeks Tiny"
       data-variation="tiny">
    </i>
    <i class="circular play icon link"
       data-content="GeeksforGeeks Small"
       data-variation="small">
    </i>
    <i class="circular play icon link"
       data-content="GeeksforGeeks Large"
       data-variation="large">
    </i> <br> <br>
 
    <strong>
      Flowing:
    </strong> <br>
    <i class="circular add icon link"
       data-content=
       "It contains well written, well thought
        and well explained computer science and
        programming articles"
       data-variation="flowing"
       data-position="top center">
    </i> <br><br>
 
    <strong>
      Inverted:
    </strong> <br>
    <i class="circular add icon link"
       data-content= "GeeksforGeeks"
       data-variation="inverted"
       data-position="top center">
    </i>
     
  </div>
  <script>
    $('.icon').popup({});
  </script>
</body>
</html>


Output:

Reference: https://semantic-ui.com/modules/popup.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!