Semantic-UI Modal Full Screen Variation

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

Semantic UI Modal Full-Screen Variation makes the modal screen appear in the full-screen mode. That means the modal covers the entire screen or hides the entire main site from view.

Semantic UI Modal Full-Screen Variation Classes:

fullscreen: Add this class to the modal screen and the modal screen will appear on the entire screen.

Syntax: Add the fullscreen class to the modal container as follows:

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

launch the modal as follows:

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

Example: In the following example, we have a full-screen modal.

HTML

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Semantic-UI Modal Full Screen 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= 
"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 FullScreen Variation </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 fullscreen 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 openModal = () => { 
        $('#gfgmodal').modal('show') 
      } 
    </script> 
  </body> 
</html> 