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.
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/
Please Login to comment...