Skip to content
Related Articles

Related Articles

Semantic-UI Modal Content

View Discussion
Improve Article
Save Article
  • Last Updated : 21 Mar, 2022
View Discussion
Improve Article
Save 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. It uses a class to add CSS to the elements.

Modals are generally used to divert the user’s attention to a part separate from the main content, as further website interactions may depend on some action that needs to be performed by the user. Semantic UI provides us with a custom-styled modal.

Let’s have a look at the various Semantic UI modal content classes, before jumping into the modal content.

Semantic UI Modal Content:

  • Header: Semantic UI Header adds a header to the modal which acts as the modal title.
  • Content: Semantic UI Content adds information about the modal.
  • Image content: Semantic UI Image Content adds images to the modal information which increases the modal visual appeal.
  • Actions: Semantic UI Actions are used to interact with the modal.

Note: In order to create a modal, we need to apply the class modal to the desired element.

Syntax:

<div class="ui modal">
   <div class="header">....</div>
   <div class="content">  
     ...
  </div>
  <div class="image content">
    <img class="image" src="...">
    ...
  </div>
   <div class="actions">
     <div class="ui approve button">...</div>
     <div class="ui cancel button">...</div>
  </div>
</div>

Note: Use the above syntax according to the need by using a combination of the above-mentioned classes. Refer to the examples below for a better understanding of the classes.

Example 1: In the below example we have demonstrated a modal header.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Content</title>
    <link href=
          rel="stylesheet" />
    <script src=
            crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body style="width:100vw; height:100vh;">
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Modal Content</h4>
        <hr>
        <br />
        <div class="ui basic modal">
            <div class="ui header">
                A Modal Header
            </div>
            <div class="actions">
                <div class="ui negative button">
                    I have to take a look again
                </div>
                <div class="ui positive button">
                    Got it
                </div>
            </div>
        </div>
        <button class="ui button"
                onclick="openModal()">
          Click Me
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
                'transition', 'horizontal flip').modal('show');
        }
    </script>
</body>
 
</html>


Output:

Semantic-UI Modal Content

Semantic-UI Modal Content

Example 2: In the below example, we have created the content of a modal using the content class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Content</title>
    <link href=
          rel="stylesheet" />
    <script src=
            crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body style="width: 100vw; height: 100vh;">
 
    <div class="ui container">
        <h2 class="ui green header">GeeksforGeeks</h2>
        <h4>Semantic UI Modal Content</h4>
        <hr>
        <br />
        <div class="ui modal">
            <div class="ui header">
                A Modal Header
            </div>
            <div class="content">
                <div class="ui header">Content Header</div>
                 
<p>GeeksforGeeks is Awesome</p>
 
            </div>
            <div class="actions">
                <div class="ui negative cancel button">
                    I agree
                </div>
                <div class="ui positive ok button">
                    It's Amazing
                </div>
            </div>
        </div>
        <button class="ui button"
                onclick="openModal()">
          Click Me
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
                'transition', 'horizontal flip').modal('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Modal Content

Semantic-UI Modal Content

Example 3: In the below example, we have created an image modal content.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Content</title>
    <link href=
        rel="stylesheet" />
        crossorigin="anonymous">
    </script>
    <script src=
    </script>
</head>
 
<body style="width: 100vw; height: 100vh;">
 
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
        <h4>Semantic UI Modal Content</h4>
        <hr>
        <br />
         
        <div class="ui modal">
            <div class="ui header">
                A Modal Header
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">
                        Description Header
                    </div>
                     
                     
<p>
                        GeeksforGeeks is an amazing
                        website to learn coding.
                    </p>
 
                     
                     
<p>
                        Machine Learning, Web Development,
                        Android Development, Data Science,
                        you name it, it's all available
                        on GeeksforGeeks.
                    </p>
 
                </div>
            </div>
            <div class="actions">
                <div class="ui negative cancel button">
                    Sort of agree
                </div>
                <div class="ui positive ok button">
                    Agree
                </div>
            </div>
        </div>
        <button class="ui button" onclick="openModal()">
            Click Me
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
                'transition',
                'horizontal flip').modal('show');
        }
    </script>
</body>
 
</html>


Output:

Semantic-UI Modal Content

Semantic-UI Modal Content

Example 4: In the below example, we have demonstrated the usage of actions class.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Content</title>
    <link href=
        rel="stylesheet" />
 
        crossorigin="anonymous">
    </script>
 
    <script src=
    </script>
</head>
 
<body style="width:100vw; height:100vh;">
    <div class="ui container">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
        <h4>Semantic UI Modal Content</h4>
        <hr>
        <br />
        <div class="ui modal">
            <div class="ui header">
                A Modal Header
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">
                        Description Header
                    </div>
                     
                     
<p>
                        GeeksforGeeks is an amazing
                        website to learn coding.
                    </p>
 
                     
                     
<p>
                        Machine Learning, Web Development,
                        Android Development, Data Science,
                        you name it, it's all available
                        on GeeksforGeeks.
                    </p>
 
                </div>
            </div>
            <div class="actions">
                <div class="ui negative cancel button">
                    Sort of agree
                </div>
                <div class="ui positive ok button">
                    Agree
                </div>
            </div>
        </div>
        <button class="ui button" onclick="openModal()">
            Click Me
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
                'transition',
                'horizontal flip').modal('show');
        }
    </script>
</body>
 
</html>


Output:

Semantic-UI Modal Content

Semantic-UI Modal Content

References: https://semantic-ui.com/modules/modal.html


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!