Semantic-UI Modal Scrolling Content Variation - Coding

Semantic UI is an open-source framework that uses CSS and jQuery to build great user interfaces. It is the same as a bootstrap for use and has great different elements to use to make your website look more amazing.

Semantic UI Modal displays content above the screen that temporarily blocks interaction with the main view of the site. We need to act according to the details provided by the modal. Semantic-UI Modal Scrolling Content Variation is used for setting the modal that can use the entire size of the screen.

Semantic-UI Modal Scrolling Content Variation class:

scrolling content: This class is used for setting the modal that can use the entire size of the screen.

Syntax:

<div class="ui modal">
 <div class="header">Header</div>
 <div class="scrolling content">
   <p>Very long content goes here</p>
 </div>
</div>

The below example illustrates the Semantic-UI Modal Scrolling Content Variation.

Example 1: In this example, we will create a modal that will trigger by clicking the modal button then the content modal will be scrollable, sometimes the content we want to show in the modal will be lengthy that’s the purpose of making a modal scrollable.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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 Scrolling Content Variation</strong> 
        </center> 
  
        <div class="ui segment"> 
            <div class="ui active modal"></div> 
            <p>List of Alphabets.</p> 
            <button class="ui button green"
                    onclick="openModal()"> 
                Open Modal 
            </button> 
            <div class="ui longer modal"> 
                <div class="header"> 
                    Alphabets 
                </div> 
                <div class="scrolling content"> 
                    <p>A</p> 
                    <p>B</p> 
                    <p>C</p> 
                    <p>D</p> 
                    <p>E</p> 
                    <p>F</p> 
                    <p>G</p> 
                    <p>H</p> 
                    <p>I</p> 
  
                    . 
                    . 
                    . 
                    . 
                    <p>X</p> 
                    <p>Y</p> 
                    <p>Z</p> 
                </div> 
            </div> 
        </div> 
    </div> 
    <script> 
        const openModal = () => { 
            $('.ui.longer.modal').modal('show'); 
        } 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Modal Scrolling Content Variation

Example 2: In this example, we will create a list-type content that will be scrollable.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <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 Scrolling Content Variation</strong> 
        </center> 
  
        <div class="ui segment"> 
            <div class="ui active modal"></div> 
            <p>List of some big Tech Companies.</p> 
            <button class="ui button green" 
                    onclick="openModal()"> 
                Open Modal 
            </button> 
            <div class="ui longer modal"> 
                <div class="header"> 
                    Tech Companies 
                </div> 
                <div class="scrolling content"> 
                    <p>GeeksforGeeks</p> 
                    <p>Apple</p> 
                    <p>Amazon</p> 
                    <p>Flipkart</p> 
                    <p>Zomato</p> 
                    <p>Capgemini</p> 
                    <p>TCS</p> 
                    <p>Wipro</p> 
                    <p>CTS</p> 
                    <p>Microsoft</p> 
                    <p>Google</p> 
                    <p>Facebook</p> 
                </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.longer.modal').modal('show'); 
        } 
    </script> 
</body> 
  
</html>

Output:

Semantic-UI Modal Scrolling Content Variation

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

Reffered: https://www.geeksforgeeks.org

Web Technologies

Related
What is SSR in NextJS ?
What is Declaration Merging in Typescript ?
Foundation CSS Kitchen Sink Equalizer
Tensorflow.js tf.callbacks.earlyStopping() Function
How to open an XML file ?

Type:	Geek
Category:	Coding
Sub Category:	Tutorial
Uploaded by:	Admin
Views:	11