Blaze UI Scrollable content Model

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.

Output:

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

Output:

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