Open In App

Semantic-UI Modal Size Variation

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 website. We need to perform an action according to the details provided by the modal.

Semantic UI Modal Size variation is used to modify the size of modals. We can have different sizes of modals like small, normal or huge.

Semantic UI Modal Size Variation Classes:

  • mini: Adding this class, the modal will be of size mini.
  • tiny: Adding this class, the modal will be of size tiny.
  • small: Adding this class, the modal will be of size small.
  • large: Adding this class, the modal will be of a size large.

Syntax: Add the desired size to the modal container from the above classes as follows:

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

launch the modal:

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

Example: In the following example, we have a set of buttons to change the size of the modal and then we can see the modals of different sizes.

HTML




<!DOCTYPE html>
<html>
  <head>
    <title>Semantic-UI Modal Size Variation</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 Size Variation </strong>
      </center>
  
      <div class="ui segment">
        <h1>Welcome to GeeksforGeeks</h1>
        <p>Find the best programming tutorials here.</p>
  
        <div class="ui group">
          <button class="ui button orange" 
                  onclick="changeSize('mini')">
            Mini
          </button>
          <button class="ui button orange" 
                  onclick="changeSize('tiny')">
            Tiny
          </button>
          <button class="ui button orange"
                  onclick="changeSize('small')">
            Small
          </button>
          <button class="ui button orange" 
                  onclick="changeSize('large')">
            Large
          </button>
        </div>
        <br />
        <button class="ui button green" 
                onclick="openModal()">
          Open Modal
        </button>
        <div class="ui modal" 
             id="gfgmodal">
          <div class="header">
            Welcome to GeeksforGeeks
          </div>
  
          <div class="content">
            <ul>
              <li>Data Structures</li>
              <li>Algorithms</li>
              <li>Machine Learning</li>
            </ul>
          </div>
          <div class="actions">
            <div class="ui red cancel button">
              <i class="close icon"></i>
              Close
            </div>
          </div>
        </div>
      </div>
    </div>
    <script>
      const changeSize = (size) => {
        $('#gfgmodal')
          .removeClass('small')
          .removeClass('mini')
          .removeClass('tiny')
          .removeClass('large')
        $('#gfgmodal').addClass(size)
      }
      const openModal = () => {
        $('#gfgmodal').modal('show')
      }
    </script>
  </body>
</html>


Output:

Semantic-UI Modal Size Variation

Semantic-UI Modal Size Variation

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



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