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 = "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" >w3wiki</ h2 > < h4 >Semantic UI Modal Variations</ h4 > < hr > < br /> < div class = "ui fullscreen modal" > < div class = "ui header" > w3wiki is Awesome or Not? </ div > < div class = "image content" > < div class = "ui large image" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210310114057/web-development-image.png" > </ div > < div class = "description" > < div class = "ui header" >Have a Peek</ div > < p > w3wiki 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 w3wiki. </ 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:
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 = "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" >w3wiki</ h2 > < h4 >Semantic UI Modal Variations</ h4 > < hr > < br /> < div class = "ui mini modal" > < div class = "ui header" > w3wiki is Awesome or Not? </ div > < div class = "image content" > < div class = "ui large image" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210310114057/web-development-image.png" > </ div > < div class = "description" > < div class = "ui header" >Have a Peek</ div > < p > w3wiki 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 w3wiki. </ 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" > w3wiki is Awesome or Not? </ div > < div class = "image content" > < div class = "ui large image" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210310114057/web-development-image.png" > </ div > < div class = "description" > < div class = "ui header" >Have a Peek</ div > < p > w3wiki 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 w3wiki. </ 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" > w3wiki is Awesome or Not? </ div > < div class = "image content" > < div class = "ui large image" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210310114057/web-development-image.png" > </ div > < div class = "description" > < div class = "ui header" >Have a Peek</ div > < p > w3wiki 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 w3wiki. </ 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" > w3wiki is Awesome or Not? </ div > < div class = "image content" > < div class = "ui large image" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210310114057/web-development-image.png" > </ div > < div class = "description" > < div class = "ui header" >Have a Peek</ div > < p > w3wiki 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 w3wiki. </ 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:
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 = "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" >w3wiki</ h2 > < h4 >Semantic UI Modal Variations</ h4 > < hr > < br /> < div class = "ui large modal" > < div class = "ui header" > w3wiki is Awesome or Not? </ div > < div class = "image scrolling content" > < div class = "ui large image" > < img src = "https://media.w3wiki.net/wp-content/cdn-uploads/20210310114057/web-development-image.png" > </ div > < div class = "description" > < div class = "ui header" >Have a Peek</ div > < p > Greetings to all the Beginner 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 Beginner 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 > w3wiki 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 w3wiki. </ p > < p > Greetings to all the Beginner 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 Beginner 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 > w3wiki 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 w3wiki. </ p > < p > Greetings to all the Beginner 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 Beginner 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 > w3wiki 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 w3wiki. </ p > < p > This platform has been designed for every Beginner 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 > w3wiki 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 w3wiki. </ p > < p > Greetings to all the Beginner 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 Beginner 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 > w3wiki 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 w3wiki. </ 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:
Reference: https://semantic-ui.com/modules/modal.html