Open In App

Semantic-UI Modal Basic Type

Improve
Improve
Like Article
Like
Save
Share
Report

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 Basic Type is a very basic and lightweight modal that appears on the top of the screen. The modal has a transparent background which partially blocks the UI of the main site.

Semantic UI Modal Basic Type Class:

  • basic: Add this class to the modal screen and then the modal becomes of basic type.

Syntax: Add the basic class to the modal as follows:

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

Launch the modal:

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

Example: In the following example, we have a button which when clicked, the basic modal appears on the screen.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Modal Basic Type</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=
           rel="stylesheet"/>
    <script src=
    </script>
    <script src=
    </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 Basic Type
        </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 basic modal">
          <div class="ui icon header">
            <i class="web icon"></i>
            GeeksforGeeks
          </div>
          <div class="content">
            <p>Welcome to GeeksforGeeks. This is a 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 openModal = () => {
        $('.ui.basic.modal').modal('show')
      }
    </script>
  </body>
</html>


Output:

Semantic-UI Modal Basic Type

Semantic-UI Modal Basic Type

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



Last Updated : 28 Feb, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads