Semantic-UI Message Dismissible Block Type

Last Updated : 08 Aug, 2022

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 Message is used to show some important information. The Dismissible Block Type is used to hide the message when the user wants it. To hide the message, we will use the jQuery click() method. In this article, we will discuss Message Dismissible Block Type in Semantic-UI.

Semantic-UI Message Dismissible Block Type Classes:

message: This class is used to create the message.
close icon: This class is used to create the close icon to dismiss the message.

Syntax:

<div class="ui message">
  <i class="close icon"></i>
  <div class="header">
    ....
  </div>
</div>

Example: The following example demonstrates the Semantic-UI Message Dismissible Block Type.

HTML

<!DOCTYPE html>
<html>
 
<head>
    <link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css" />
    <script src=
"https://code.jquery.com/jquery-3.1.1.min.js">
    </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
    </script>
</head>
 
<body>
    <div class="ui container center aligned">
        <h2 class="ui green header">
            GeeksforGeeks
        </h2>
        <h3>
            Semantic-UI Message Dismissible Block Type
        </h3>
        <div class="ui message"> 
        <i class="close icon"></i>
            <div class="header">
                 GeeksforGeeks 
            </div>
             
<p>
                A Computer Science portal for geeks. 
            </p>
 
        </div>
    </div>
    <script>
        $('.message .close').on('click', function() {
            $(this).closest('.message').transition('slide');
        });
    </script>
</body>
</html>