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.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</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">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:
Example 2: In the below example, we have created the content of a modal using the content class.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</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">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:
Example 3: In the below example, we have created an image modal content.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</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">
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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</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:
Example 4: In the below example, we have demonstrated the usage of actions class.
<!DOCTYPE html>
<html>
<head>
<title>Semantic UI Modal Content</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">
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=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20210310114057/web-development-image.png">
</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:
References: https://semantic-ui.com/modules/modal.html