Blaze UI Scrollable content Model

Last Updated : 16 May, 2022

Blaze UI is a free open source UI Toolkit that provides a great structure for building websites quickly with a scalable and maintainable foundation. All components in Blaze UI are developed mobile-first and rely solely on native browser features, not a separate library or framework. It helps us to create a scalable and responsive website fast and efficiently with a consistent style.

In this article, we will learn about Blaze UI Scrollable Modal. Blaze UI scrollable modal is a dialog box that contains the content that is scrollable and is displayed on the screen when the user clicks the button.

Blaze UI Scrollable content modal class:

o-panel: This class is used to add a scrollable content modal and is added to the class of modal body and applies a fixed height so long content starts to scroll.

Syntax:

<div role="dialog" class="o-modal o-modal--visible">
   <div class="c-card">
     <div class="c-card__body o-panel">
       ...
      </div>
   </div>
</div>

Example 1: Below example demonstrates the basic scrollable content modal.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
<body> 
    <div class="o-container o-container--medium"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h3>Blaze UI Scrollable Content Modal</h3> 
        <button type="button" class="c-button  
            c-button--brand" onClick="showModal()"> 
            Show Modal 
        </button> 
    </div> 
    <div role="dialog" class="o-modal o-modal--visible" 
        id="modal"> 
        <div class="c-card"> 
            <header class="c-card__header"> 
                <button type="button" 
                    class="c-button c-button--close" 
                    onclick="closeModal()">× 
                </button> 
                <h2 class="c-heading">GeeksforGeeks</h2> 
            </header> 
            <div class="c-card__body o-panel" 
                style="height:100px"> 
                GeeksforGeeks is a portal for geeks. 
                It has a collection of articles, tutorials, 
                quizzes, and videos. It also has a forum for discussion. 
                Participants can post their queries and answers.  
                Find more about GeeksforGeeks below: 
                <ul class="c-list"> 
                    <a href="#"> 
                        <li class="c-list__item">Tutorials</li> 
                    </a> 
                    <a href="#"> 
                        <li class="c-list__item">Articles</li> 
                    </a> 
                    <a href="#"> 
                        <li class="c-list__item">Courses></li> 
                    </a> 
                    <ul class="c-list"> 
                        <a href="#"> 
                            <li class="c-list__item">Java</li> 
                        </a> 
                        <a href="#"> 
                            <li class="c-list__item">Python</li> 
                        </a> 
                    </ul> 
                </ul> 
            </div> 
            <footer class="c-card__footer"> 
                <button type="button" 
                    class="c-button c-button--brand" 
                    onclick="closeModal()">Close 
                </button> 
            </footer> 
        </div> 
    </div> 
    <script> 
        function closeModal() { 
            document.getElementById("modal") 
                .classList.remove("o-modal--visible"); 
        } 
        function showModal() { 
            document.getElementById("modal") 
                .classList.add("o-modal--visible"); 
        } 
    </script> 
</body> 
</html>

Output:

Example 2: Below example demonstrates the scrollable content modal with an image.

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href= 
"https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" /> 
</head> 
<body> 
    <div class="o-container o-container--medium"> 
        <h1 style="color: green">GeeksforGeeks</h1> 
        <h3>Blaze UI Scrollable Content Modal</h3> 
        <button type="button" 
            class="c-button c-button--brand" 
            onClick="showModal()"> 
            Show Modal 
        </button> 
    </div> 
    <div role="dialog" class="o-modal o-modal--visible" 
        id="modal"> 
        <div class="c-card"> 
            <header class="c-card__header"> 
                <button type="button" 
                    class="c-button c-button--close" 
                    onclick="closeModal()"> 
                    × 
                </button> 
                <h2 class="c-heading">GeeksforGeeks</h2> 
            </header> 
  
            <div class="c-card__body o-panel " style="height:200px"> 
                <Image src= 
"https://media.geeksforgeeks.org/wp-content/uploads/20220221132017/download.png"
                    style="margin-left: 20px;  
                           border-radius: 150px;  
                           width: 150px;" /> 
                GeeksforGeeks is a portal for geeks. It has a  
                collection of articles, tutorials, quizzes,  
                and videos. It also has a forum for discussion.  
                Participants can post their queries and answers.  
                GFG has its own job portal where you can apply  
                for jobs 
            </div> 
            <footer class="c-card__footer"> 
                <button type="button" 
                    class="c-button c-button--brand" 
                    onclick="closeModal()"> 
                    Close 
                </button> 
            </footer> 
        </div> 
    </div> 
    <script> 
        function closeModal() { 
            document.getElementById("modal") 
                .classList.remove("o-modal--visible"); 
        } 
        function showModal() { 
            document.getElementById("modal") 
                .classList.add("o-modal--visible"); 
        } 
    </script> 
</body> 
</html>