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.
<!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.
<!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/