Semantic-UI Modal Types

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
                </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:

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=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" 
          rel="stylesheet" />

    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js"
            crossorigin="anonymous">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </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:

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

Explore