Blaze UI is a CSS open-source 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.
Blaze UI Alerts are customizable alerts that can have a different range of colors and are delivered with lots of functionalities. Alerts are used to notify the user about some action to be taken or have taken place. We can show and hide the alerts programmatically as well.
Blaze UI Alerts Methods:
- show(): This method is used to display an alert.
- close(): This method is used to hide an alert.
- isOpen(): This method returns a boolean value whether the alert is open or not.
Syntax: Create an alert box using Blaze UI as follows:
<blaze-alert open dismissible>
GeeksforGeeks
</blaze-alert>Example 1: In the following example, we have some alerts which can be opened and closed.
<!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 src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Alerts Methods</strong>
<br />
<br />
<div>
<button onclick="showAlert('alert1')">
Alert 1
</button>
<button onclick="showAlert('alert2')">
Alert 2
</button>
<button onclick="showAlert('alert3')">
Alert 3
</button>
</div>
<blaze-alert id="alert1" open dismissible>
GeeksforGeeks</blaze-alert>
<blaze-alert id="alert2" open dismissible type="warning">
Data Structures
</blaze-alert>
<blaze-alert id="alert3" open dismissible type="success">
Algorithms
</blaze-alert>
</center>
</div>
<script>
function showAlert(alertName) {
document.getElementById(alertName).show()
}
</script>
</body>
</html>
|
Output
Example 2: In the following example, we will check if an alert is open by clicking the check button.
<!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 src=
</script>
</head>
<body>
<div class="o-container" style="padding: 1em;">
<center>
<h1 style="color: green;">
GeeksforGeeks
</h1>
<strong>Blaze UI Alerts Methods</strong>
<br />
<br />
<div>
<button onclick="showAlert()">
Alert 1
</button>
<button onclick="checkOpen()">
Check Open
</button>
</div>
<blaze-alert type="success" id="alert1" open dismissible>
GeeksforGeeks
</blaze-alert>
</center>
</div>
<script>
function showAlert() {
document.getElementById('alert1').show()
}
async function checkOpen() {
let isOpen = await document
.getElementById('alert1').isOpen();
alert(`The Alert is ${isOpen ? 'open' : 'closed'}`)
}
</script>
</body>
</html>
|
Output
Reference: https://www.blazeui.com/components/alerts