Semantic-UI Modal Content
Last Updated :
21 Mar, 2022
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 use 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 content classes, before jumping into the modal content.
Semantic UI Modal Content:
- Header: Semantic UI Header adds a header to the modal which acts as the modal title.
- Content: Semantic UI Content adds information about the modal.
- Image content: Semantic UI Image Content adds images to the modal information which increases the modal visual appeal.
- Actions: Semantic UI Actions are used to interact with the modal.
Note: In order to create a modal, we need to apply the class modal to the desired element.
Syntax:
<div class="ui modal">
<div class="header">....</div>
<div class="content">
...
</div>
<div class="image content">
<img class="image" src="...">
...
</div>
<div class="actions">
<div class="ui approve button">...</div>
<div class="ui cancel button">...</div>
</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 demonstrated a modal header.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Modal Content</ 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 Content</ h4 >
< hr >
< br />
< div class = "ui basic modal" >
< div class = "ui header" >
A Modal Header
</ div >
< div class = "actions" >
< div class = "ui negative button" >
I have to take a look again
</ div >
< div class = "ui positive button" >
Got it
</ div >
</ div >
</ div >
< button class = "ui button"
onclick = "openModal()" >
Click Me
</ button >
</ div >
< script >
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'horizontal flip').modal('show');
}
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Modal Content
Example 2: In the below example, we have created the content of a modal using the content class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Modal Content</ 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 Content</ h4 >
< hr >
< br />
< div class = "ui modal" >
< div class = "ui header" >
A Modal Header
</ div >
< div class = "content" >
< div class = "ui header" >Content Header</ div >
< p >GeeksforGeeks is Awesome</ p >
</ div >
< div class = "actions" >
< div class = "ui negative cancel button" >
I agree
</ div >
< div class = "ui positive ok button" >
It's Amazing
</ div >
</ div >
</ div >
< button class = "ui button"
onclick = "openModal()" >
Click Me
</ button >
</ div >
< script >
const openModal = () => {
$('.ui.modal').modal('setting',
'transition', 'horizontal flip').modal('show');
}
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Modal Content
Example 3: In the below example, we have created an image modal content.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Modal Content</ 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 Content</ h4 >
< hr >
< br />
< div class = "ui modal" >
< div class = "ui header" >
A Modal Header
</ 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 cancel button" >
Sort of agree
</ div >
< div class = "ui positive ok button" >
Agree
</ div >
</ div >
</ div >
< button class = "ui button" onclick = "openModal()" >
Click Me
</ button >
</ div >
< script >
const openModal = () => {
$('.ui.modal').modal('setting',
'transition',
'horizontal flip').modal('show');
}
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Modal Content
Example 4: In the below example, we have demonstrated the usage of actions class.
HTML
<!DOCTYPE html>
< html >
< head >
< title >Semantic UI Modal Content</ 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 Content</ h4 >
< hr >
< br />
< div class = "ui modal" >
< div class = "ui header" >
A Modal Header
</ 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 cancel button" >
Sort of agree
</ div >
< div class = "ui positive ok button" >
Agree
</ div >
</ div >
</ div >
< button class = "ui button" onclick = "openModal()" >
Click Me
</ button >
</ div >
< script >
const openModal = () => {
$('.ui.modal').modal('setting',
'transition',
'horizontal flip').modal('show');
}
</ script >
</ body >
</ html >
|
Output:
Semantic-UI Modal Content
References: https://semantic-ui.com/modules/modal.html
Share your thoughts in the comments
Please Login to comment...