Semantic-UI Modal Variations
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
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
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
Reference: https://semantic-ui.com/modules/modal.html
.png)
