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
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
References: https://semantic-ui.com/modules/modal.html
Last Updated :
20 Apr, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...