Skip to content
Related Articles

Related Articles

Semantic-UI Modal Types

View Discussion
Improve Article
Save Article
  • Last Updated : 20 Apr, 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 make your website look more amazing. It uses a class to add CSS to the elements.

Modal is 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. Before getting to know the various modal types, let’s have a look at the classes that let us use the Semantic UI modals.

Semantic UI Modal Classes:

  • modal: This class is used to set a standard Semantic UI Modal.
  • basic: This class is used to set a basic modal accompanied by the modal class.

Syntax:

<div class="ui  Modal-Classes modal">
    ....
</div>

Example: In the below example, we have created a standard Semantic UI Modal.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Types</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 Types</h4>
        <hr>
        <br />
        <div class="ui modal">
            <i class="close icon"></i>
            <div class="header">
                Standard Modal
            </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 button">
                    Sort of agree
                </div>
                <div class="ui positive button">
                    Agree
                </div>
            </div>
        </div>
        <button class="ui button"
            onclick="openModal()">
            Click Me
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
            'transition', 'scale').modal('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Modal Types

Semantic-UI Modal Types

Example: In the below example, we have created a basic Semantic UI Modal.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Types</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 Types</h4>
        <hr>
        <br />
        <div class="ui basic modal">
            <div class="ui icon header">
                <i class="smile outline icon"></i>
                Agree or Not?
            </div>
            <div class="content">
                
<p>You still don't agree that
                  GeeksForGeeks is an amazing website?</p>
 
 
            </div>
            <div class="actions">
                <div class="ui negative button">
                    I agree
                </div>
                <div class="ui positive button">
                    Of course it's awesome
                </div>
            </div>
        </div>
        <button class="ui button"
                onclick="openModal()">
          Click Me
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
            'transition', 'vertical flip').modal('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Modal Types

Semantic-UI Modal Types

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


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!