Open In App

Semantic-UI Modal Variations

Improve
Improve
Like Article
Like
Save
Share
Report

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.

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 variation classes, before jumping into the modal variations.

Semantic UI Modal Variations:

  • Full Screen: Semantic UI Modal Full-Screen Variation makes the modal screen appear in the full-screen mode. That means the modal covers the entire screen or hides the entire main site from view.
  • Size: Semantic UI Modal Size variation is used to modify the size of modals. We can have different sizes of modals like small, normal or huge.
  • Scrolling: Semantic UI Modal Scrolling variation is used to set the modal in scroll mode.

Syntax:

<div class="ui Modal-Variation modal">
    <div class="header">....</div>
    <div class="content">
      ....
    </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 created a fullscreen modal.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Variations</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 Variations</h4>
        <hr>
        <br />
        <div class="ui fullscreen modal">
            <div class="ui header">
                GeeksForGeeks is Awesome or Not?
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">Have a Peek</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()">
          Fullscreen Modal
        </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
                'transition', 'fade up').modal('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Modal Variations

Semantic-UI Modal Variations

Example 2: In the below example, we have created modal of various size classes as mentioned above. The size classes used are tiny, mini, small, and large.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Variations</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 Variations</h4>
        <hr>
        <br />
        <div class="ui mini modal">
            <div class="ui header">
                GeeksforGeeks is Awesome or Not?
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">Have a Peek</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>
        <div class="ui tiny modal">
            <div class="ui header">
                GeeksforGeeks is Awesome or Not?
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">Have a Peek</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>
        <div class="ui small modal">
            <div class="ui header">
                GeeksforGeeks is Awesome or Not?
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">Have a Peek</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>
        <div class="ui large modal">
            <div class="ui header">
                GeeksforGeeks is Awesome or Not?
            </div>
            <div class="image content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">Have a Peek</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="openMiniModal()">
          Mini Modal
        </button>
        <button class="ui button"
                onclick="openTinyModal()">
          Tiny Modal
        </button>
        <button class="ui button"
                onclick="openSmallModal()">
          Small Modal
        </button>
        <button class="ui button"
                onclick="openLargeModal()">
          Large Modal
        </button>
    </div>
 
    <script>
        const openMiniModal = () => {
            $('.ui.mini.modal').modal('setting',
                'transition', 'fade down').modal('show');
        }
        const openTinyModal = () => {
            $('.ui.tiny.modal').modal('setting',
                'transition', 'scale').modal('show');
        }
        const openSmallModal = () => {
            $('.ui.small.modal').modal('setting',
                'transition', 'fade up').modal('show');
        }
        const openLargeModal = () => {
            $('.ui.large.modal').modal('setting',
                'transition', 'vertical flip').modal('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Modal Variations

Semantic-UI Modal Variations

Example 3: In the below example, we have created a scrollable modal.

HTML




<!DOCTYPE html>
<html>
 
<head>
    <title>Semantic UI Modal Variations</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 Variations</h4>
        <hr>
        <br />
        <div class="ui large modal">
            <div class="ui header">
                GeeksforGeeks is Awesome or Not?
            </div>
            <div class="image scrolling content">
                <div class="ui large image">
                    <img src=
                </div>
                <div class="description">
                    <div class="ui header">Have a Peek</div>
                     
 
<p>
                      Greetings to all the Geeks out there!
                      We welcome you to the platform where we
                      consistently strive to offer the best of
                      education.
                    </p>
 
 
 
                     
 
<p>
                      This platform has been designed for every
                      geeks wishing to expand knowledge, share
                      their knowledge and is ready to grab their
                      dream job. We have millions of articles,
                      live as well as online courses, thousands
                      of tutorials
                      and much more just for the geek inside you.
                      Thank you for choosing and supporting us!
                    </p>
 
 
 
                     
 
<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>
 
 
 
                     
 
<p>
                      Greetings to all the Geeks out there!
                      We welcome you to the platform where
                      we consistently
                      strive to offer the best of education.
                    </p>
 
 
 
                     
 
<p>
                      This platform has been designed for
                      every geeks wishing to expand knowledge,
                      share their knowledge, and is ready to
                      grab their dream job. We have millions
                      of articles, live as well as online
                      courses, thousands of tutorials and
                      much more just for the geek inside you.
                      Thank you for choosing and supporting us!
                    </p>
 
 
 
                     
 
<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>
 
 
 
                     
 
<p>
                      Greetings to all the Geeks out there! We
                      welcome you to the platform where we
                      consistently
                      strive to offer the best of education.
                    </p>
 
 
 
                     
 
<p>
                      This platform has been designed for every
                      geeks wishing to expand knowledge, share
                      their knowledge and is ready to grab their
                      dream job. We have millions of articles,
                      live as well as online courses, thousands
                      of tutorials and much more just for the
                      geek inside you.
                      Thank you for choosing and supporting us!
                    </p>
 
 
 
                     
 
<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>
 
 
 
                     
 
<p>
                      This platform has been designed for every
                      geeks wishing to expand knowledge, share
                      their knowledge and is ready to grab their
                      dream job. We have millions of articles,
                      live as well as online courses, thousands
                      of tutorials and much more just for the
                      geek inside you.
                      Thank you for choosing and supporting us!
                    </p>
 
 
                     
 
<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>
 
 
                     
 
<p>
                      Greetings to all the Geeks out there! We
                      welcome you to the platform where we
                      consistently
                      strive to offer the best of education.
                    </p>
 
 
                     
 
<p>
                      This platform has been designed for every
                      geeks wishing to expand knowledge, share
                      their knowledge and is ready to grab their
                      dream job. We have millions of articles,
                      live as well as online courses, thousands
                      of tutorials and much more just for the
                      geek inside you.
                      Thank you for choosing and supporting us!
                    </p>
 
 
 
                     
 
<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()">
           Scrolling Modal
         </button>
    </div>
 
    <script>
        const openModal = () => {
            $('.ui.modal').modal('setting',
                'transition', 'vertical flip')
                .modal('show');
        }
    </script>
</body>
</html>


Output:

Semantic-UI Modal Variations

Semantic-UI Modal Variations

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



Last Updated : 20 Apr, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads