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=
"https://unpkg.com/@blaze/css@12.2.0/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.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href=
"https://unpkg.com/@blaze/css@12.2.0/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>
Output:
Reference: https://www.blazeui.com/objects/modals/