Semantic-UI Modal Header Content

Last Updated : 28 Feb, 2022

Semantic UI open-source framework gives icons or glyphs that are used to show pictures related to some elements using CSS and jQuery that is used to create great user interfaces. It is a development framework used to create beautiful and responsive layouts.

Semantic UI Modal displays content above the screen that temporarily blocks interaction with the main view of the site. We need to perform an action according to the details provided by the modal.

Semantic UI Modal Header Content sets a heading for the modal screen. We can set the heading for the modal screen which appears on top of the modal screen.

Semantic UI Modal Header Content classes:

header: Create a container with this class and the container will be formatted as a header. The header normally contains text and sometimes an icon.

Syntax: Add the header class to a container as a child of the modal screen as follows:

<div class="ui modal">
    <div class="header"> ... </div>
</div>

launch the modal as follows:

$('.ui.modal').modal('show')

Example: In the following example, we have a modal screen with a header that displays a welcome message.

HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Modal Header Content</title>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible"
          content="IE=edge" />
    <meta name="viewport" 
          content="width=device-width, initial-scale=1.0" />
    <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">
   </script>
    <script src=
"https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.js">
   </script>
    <style>
      .icon {
        margin: 16px;
      }
    </style>
  </head>

  <body>
    <div class="ui container">
      <center>
        <div class="ui header green">
          <h1>
            GeeksforGeeks
          </h1>
        </div>
        <strong> Semantic UI Modal Header Content </strong>
      </center>

      <div class="ui segment">
        <h1>Welcome to GeeksforGeeks</h1>
        <p>Find the best programming tutorials here.</p>

        <button class="ui button green"
                onclick="openModal()">
          Open Modal
        </button>
        <div class="ui modal">
          <div class="header">
            Welcome to GeeksforGeeks
          </div>
          <div class="content">
            <ul>
              <li>Data Structures</li>
              <li>Algorithms</li>
              <li>Machine Learning</li>
            </ul>
            <br />
          </div>
          <div class="actions">
            <div class="ui red cancel button">
              <i class="close icon"></i>
              Close
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      const openModal = () => {
        $('.ui.modal').modal('show')
      }
    </script>
  </body>
</html>

Output:

Reference: https://semantic-ui.com/modules/modal.html#header

Semantic-UI Header Content

manavsarkar07

Improve

Article Tags :

Semantic-UI Modal Header Content

Similar Reads

Thank You!

What kind of Experience do you want to share?