Skip to content
Related Articles

Related Articles

Blaze UI Scrollable content Model

View Discussion
Improve Article
Save Article
Like Article
  • 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=
</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=
</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=
                    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>


Output:

 

Reference: https://www.blazeui.com/objects/modals/


My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!