Open In App

Semantic-UI Popup Variations

Last Updated : 20 Apr, 2022
Improve
Improve
Like Article
Like
Save
Share
Report

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



Previous Article
Next Article

Similar Reads

Semantic-UI Popup Titled Type
Semantic UI is an open-source UI framework that is built with CSS preprocessor less and jQuery. It comes with pre-styled and functional elements and modules that help in building great websites faster. It can also be used with other CSS frameworks like Bootstrap. A popup module is used to show additional information to the user. In this article, we
3 min read
Semantic-UI | Popup
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. It uses a class to add CSS to the elements. Pop is used to display some content on the top of the page. Syntax: jQuery Code $('.button'
4 min read
ReactJS Semantic UI Popup Module
Semantic UI is a modern framework used in developing seamless designs for the website, It gives the user a lightweight experience with its components. It uses the predefined CSS, JQuery language to incorporate in different frameworks. In this article we will know how to use Popup Module in ReactJS Semantic UI. Popup Module is used to display conten
2 min read
Semantic-UI Popup Size Variation
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. it makes web pages look amazing and responsive. Semantic UI Popup is used to display additional information through popups to the
3 min read
Semantic-UI Popup Fluid Variation
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive. Semantic UI Popup is used to display additional information through popups to the
2 min read
Semantic-UI Popup Flowing Variation
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive. Semantic UI Popup is used to display additional information through popups to the
2 min read
Semantic-UI Popup HTML Type
Semantic UI is a front-end framework built with less and jQuery. It is used for building responsive and attractive web interfaces. In this article, we will be seeing the Semantic UI Popup HTML Type. A Semantic UI Popup module is used to show the additional information about an element. An HTML type popup can specify HTML code to be used as the cont
2 min read
Semantic-UI Popup Basic Variation
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive. Semantic UI Popup is used to display additional information through popups to the
2 min read
Semantic-UI Popup Inverted Variation
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. It makes web pages look amazing and responsive. Semantic UI Popup is used to display additional information through popups to the
2 min read
Semantic-UI Popup Tooltip Type
Semantic UI is a modern framework used in developing seamless designs for web pages, It gives the user a lightweight experience with its components. It uses predefined CSS and jQuery to incorporate different frameworks. it makes web pages look amazing and responsive. Semantic UI Popup is used to display additional information through popups to the
3 min read