Blaze UI is a CSS open-source framework. It is a lightweight UI toolkit that provides great tools for building customized and scalable applications. It can work with any framework that exists. It can adapt to any ecosystem. All designs or CSS are mobile-first and hence responsive. Its project is available open-source so a large community maintains it.
Blaze UI Modals are created to popup some important updates or details of some new event. Modals draw the attention of the users immediately as the modal hides the main content of the webpage. Either the user has to take action or dismiss it depending on the modal.
- Blaze UI Modals Attributes: In Blaze UI modals there are 4 different attributes that play different roles for modals
- Blaze UI Modals Methods: There are three different methods that work on modals that is show, close, and isOpen.
- Blaze UI Modal Types: There 4 types of modals in Blaze Ui Modals Basic Modal, Ghost Modal, Scrollable.
Syntax: Create a modal as follows:
<blaze-modal open dismissible> <!-- Content --> </blaze-modal>
Example 1: In the following example, we have a simple modal in our webpage that opens or closes with a button click.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Modals</strong>
<br /><br />
<button onclick="openModal()"
class="c-button c-button--success">
Open Modal
</button>
</center>
<blaze-modal id="gfgmodal" open dismissible>
<blaze-card>
<blaze-card-header>
<h2>Welcome to GeeksforGeeks</h2>
</blaze-card-header>
<blaze-card-body>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</blaze-card-body>
<blaze-card-footer>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
<button onclick="closeModal()" class=
"c-button c-button--error c-button--ghost">
Close Modal
</button>
</blaze-card-footer>
</blaze-card>
</blaze-modal>
</div>
<script>
const openModal = () => {
document.getElementById('gfgmodal').show();
}
const closeModal = () => {
document.getElementById('gfgmodal').close();
}
</script>
</body>
</html>
|
Output:
Example 2: In the following example, we have a full-screen modal.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Modals</strong>
<br /><br />
<button onclick="openModal()"
class="c-button c-button--success">
Open Modal
</button>
</center>
<blaze-modal id="gfgmodal" open full>
<blaze-card>
<blaze-card-header>
<h2>Welcome to GeeksforGeeks</h2>
</blaze-card-header>
<blaze-card-body>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
</blaze-card-body>
<blaze-card-footer>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
<button onclick="closeModal()" class=
"c-button c-button--error c-button--ghost">
Close Modal
</button>
</blaze-card-footer>
</blaze-card>
</blaze-modal>
</div>
<script>
const openModal = () => {
document.getElementById('gfgmodal').show()
}
const closeModal = () => {
document.getElementById('gfgmodal').close()
}
</script>
</body>
</html>
|
Output:
Example 3: In the following example, we are going to create a ghost modal. A ghost modal does not have any background or transparent background.
<!DOCTYPE html><html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible"
content="IE=edge" />
<meta name="viewport"
content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet"
href=
<script type="module"
src=
</script>
<script nomodule=""
src=
</script>
</head>
<body>
<div class="o-container"
style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Modals</strong>
<br /><br />
<button onclick="openModal()"
class="c-button c-button--success">
Open Modal
</button>
</center>
<blaze-modal id="gfgmodal" open ghost>
<h2>Welcome to GeeksforGeeks</h2>
<p>
<b>Some tutorials are:-</b>
</p>
<ul>
<li>Data Structures</li>
<li>Algorithms</li>
<li>Machine Learning</li>
</ul>
<p class="u-paragraph">
A computer science portal for geeks.
</p>
<button onclick="closeModal()" class=
"c-button c-button--error c-button--ghost">
Close Modal
</button>
</blaze-modal>
</div>
<script>
const openModal = () => {
document.getElementById('gfgmodal').show()
}
const closeModal = () => {
document.getElementById('gfgmodal').close()
}
</script>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/objects/modals/