Semantic-UI | Message
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: 
Example 2: List Message
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: 
Example 3: This example creating a Dismissible Message. This requires the jQuery library to be imported. 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.
Please Login to comment...