Semantic UI is an open-source framework that uses CSS and jQuery to build a great user interface. 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. A message shows information related to some content.
Example 1:
html
<!DOCTYPE html><html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<div class="ui message">
<div class="header">
Geeksforgeeks
</div>
<p>A computer science Portal.</p>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
html
<!DOCTYPE html><html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
</head>
<body>
<div class="ui container">
<div class="ui message">
<div class="header">
New Courses
</div>
<ul>
<li>Data Structure</li>
<li>AngularJS</li>
<li>NodeJS</li>
</ul>
</div>
</div>
<script src=
</script>
</body>
</html>
|
Output:
Syntax:
$('.message .close').on('click', function() {
$(this).closest('.message').transition('fade');
});Complete code:
html
<!DOCTYPE html><html>
<head>
<title>Semantic UI</title>
<link href=
rel="stylesheet" />
integrity=
"sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous">
</script>
<script src=
</script>
</head>
<body>
<div class="ui container">
<div class="ui message">
<i class="close icon"></i>
<div class="header">
Thank you for Choosing Geeksforgeeks!
</div>
<p>Hope you have great learning here.</p>
</div>
</div>
<script>
$('.message .close').on('click', function () {
$(this).closest('.message').transition('fade');
});
</script>
</body>
</html>
|
Output:
Note:
- You can add class info, error, success, positive, and warning to change the look of the message. For example: To display the warning message: class=’ui warning message’.
- You can write any color or size class to change the color or size of class respectively.