Semantic UI is an open-source framework that has some predefined classes to make our website look beautiful and responsive. It is similar to bootstrap as it has pre-defined classes for use. It used CSS and jQuery to build the interface. It has some different types of elements that help us to create a beautiful website.
Semantic-UI Modal is used to display the content on the screen that can temporarily block interaction with the main content. We can have any type of content inside the modal. In this article, we will discuss Modal in Semantic-UI.
- Semantic-UI Modal Types: We have two types of modal in Semantic UI Modal, one in Modal and the other one in Basic Modal.
- Semantic-UI Modal Content: There are four types of modal content Header, text content or you can say content, Image Content, and action content.
- Semantic-UI Modal Variations: Semantic UI Modal offers us three variants of modal Full Screen modal, different sized modal, and Scrolling content modal.
- Semantic-UI Modal States: There are only one state in odal that is an active state.
Syntax:
<div class="ui modal"> ... </div>
Example 1: The following code demonstrates the Semantic-UI Modal Types.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI Modal</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui segment">
<button class="ui button primary" onclick="modalType()">
Modal- Modal Type
</button>
<div class="ui modal" id="modalType">
<i class="close icon"></i>
<div class="header">
GeeksforGeeks
</div>
<h4>
A Computer Science portal for geeks.
It contains well written, well thought
and well explained computer science and
programming articles
</h4>
</div>
</div>
<div class="ui segment">
<button class="ui button green" onclick="basicType()">
Modal- Basic Type
</button>
<div class="ui basic modal" id="basicType">
<div class="ui icon header">
<i class="web icon"></i>
GeeksforGeeks
</div>
<div class="content">
<p>
Welcome to GeeksforGeeks. This is Basic modal.
</p>
<br />
</div>
<div class="actions">
<div class="ui red basic cancel inverted button">
<i class="close icon"></i>
Close
</div>
</div>
</div>
</div>
</div>
<script>
const modalType = () => {
$('#modalType').modal('show');
}
const basicType = () => {
$('#basicType').modal('show');
}
</script>
</body>
</html>
|
Output:
Semantic-UI Modal Types
Example 2: The following code demonstrates the Semantic-UI Modal Content.
HTML
<!DOCTYPE html> <html>
<head>
<title>Semantic UI Modal</title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui segment">
<button class="ui button green" onclick="headerContent()">
Modal- Header Content
</button>
<div class="ui modal" id="headerContent">
<div class="header">
This is Modal Header
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green" onclick="contentContent()">
Modal- Content Content
</button>
<div class="ui modal" id="contentContent">
<div class="content">
<p> GeeksforGeeks Content 1</p>
<p> GeeksforGeeks Content 2 </p>
<p> GeeksforGeeks Content 3 </p>
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green" onclick="imageContent()">
Modal- Image Content
</button>
<div class="ui modal" id="imageContent">
<div class="image content">
<img class="image" src=
<div class="description">
<p> GeeksforGeeks Image </p>
<p> GeeksforGeeks Image </p>
<p> GeeksforGeeks Image </p>
</div>
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green" onclick="actionContent()">
Modal- Actions Content
</button>
<div class="ui modal" id="actionContent">
<div class="header">
GeeksforGeeks
</div>
<div class="actions">
<div class="ui green approve button">
<i class="close icon"></i>
Accepted
</div>
<div class="ui red cancel button">
<i class="close icon"></i>
Rejected
</div>
</div>
</div>
<div class="textt"> </div>
</div>
</div>
<script>
const headerContent = () => {
$('#headerContent').modal('show');
}
const contentContent = () => {
$('#contentContent').modal('show');
}
const imageContent = () => {
$('#imageContent').modal('show');
}
const actionContent = () => {
$('#actionContent').modal('show');
}
$('#actionContent').modal({
onApprove: function () {
$('.textt').text('Accepted')
},
onDeny: function () {
$('.textt').text('Rejected')
},
})
</script>
</body>
</html>
|
Output:
Semantic-UI Modal Content.
Example 3: The following code demonstrates the Semantic-UI Modal Variations.
HTML
<!DOCTYPE html> <html>
<head>
<title> Semantic UI Modal </title>
<link rel="stylesheet" href=
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui segment">
<button class="ui button green" onclick="fullVariation()">
Modal- Full Screen Variation
</button>
<div class="ui fullscreen modal" id="fullVariation">
<div class="header">
This is Full Screen Modal
</div>
<div class="content">
<p> GeeksforGeeks Content 1</p>
<p> GeeksforGeeks Content 2 </p>
<p> GeeksforGeeks Content 3 </p>
</div>
</div>
</div>
<div class="ui segment">
<div class="ui group">
<button class="ui button primary" onclick="changeSize('mini')">
Mini
</button>
<button class="ui button primary" onclick="changeSize('tiny')">
Tiny
</button>
<button class="ui button primary"
onclick="changeSize('small')">
Small
</button>
<button class="ui button primary" onclick="changeSize('large')">
Large
</button>
</div> <br>
<button class="ui button green" onclick="sizeVariation()">
Modal- Size Variation
</button>
<div class="ui modal" id="sizeVariation">
<div class="content">
<p> GeeksforGeeks 1</p>
<p> GeeksforGeeks 2 </p>
<p> GeeksforGeeks 3 </p>
</div>
</div>
</div>
<div class="ui segment">
<button class="ui button green" onclick="scrollVariation()">
Modal- Scrolling Content Variation
</button>
<div class="ui longer modal" id="scrollVariation">
<div class="header">
Scrolling Content Variation
</div>
<div class="scrolling content">
<p> GFG 1 </p>
<p> GFG 2 </p>
<p> GFG 3 </p>
<p> GFG 4 </p>
<p> GFG 5 </p>
<p> GFG 6 </p>
<p> GFG 7 </p>
<p> GFG 8 </p>
<p> GFG 9 </p>
<p> GFG 10 </p>
<p> GFG 11 </p>
<p> GFG 12 </p>
<p> GFG 13 </p>
<p> GFG 14 </p>
<p> GFG 15 </p>
<p> GFG 16 </p>
<p> GFG 17 </p>
<p> GFG 18 </p>
<p> GFG 19 </p>
<p> GFG 20 </p>
</div>
</div>
</div>
</div>
<script>
const fullVariation = () => {
$('#fullVariation').modal('show');
}
const changeSize = (size) => {
$('#sizeVariation')
.removeClass('small')
.removeClass('mini')
.removeClass('tiny')
.removeClass('large')
$('#sizeVariation').addClass(size)
}
const sizeVariation = () => {
$('#sizeVariation').modal('show')
}
const scrollVariation = () => {
$('#scrollVariation').modal('show')
}
</script>
</body>
</html>
|
Output:
Semantic-UI Modal Variations
Example 4: The following code demonstrates the Semantic-UI Modal States.
HTML
<!DOCTYPE html> <html>
<head>
<title> Semantic UI Modal </title>
<link rel="stylesheet" href=
</head>
<body>
<div class="ui container center aligned">
<h2 class="ui green header">
GeeksforGeeks
</h2>
<h3>
Semantic UI Modal
</h3>
<div class="ui active modal">
<div class="header">
Modal- Active State
</div>
<h3 class="content">
<p>
GeeksforGeeks
</p>
<p>
A Computer Science portal for geeks.
It contains well-written, well thought
and well-explained computer science and
programming articles.
</p>
</h3>
</div>
</div>
</body>
</html>
|
Output:
Semantic-UI Modal States
Reference: https://semantic-ui.com/modules/modal.html