Blaze UI is a framework-free open-source UI toolkit. It provides a great foundation for building scalable websites faster. Blaze UI comes with a lot of pre-styled components and many utilities so that developers don’t have to build everything from scratch. All of its components rely solely on native browser features so it can be used without any library or framework.
In this article, we will be seeing Blaze UI Modal Attributes. Modal is a component of a web page that displays in front of all content of the web page. It is generally used to provide or take information from users. The Modal component in Blaze UI has four attributes which are listed below.
Blaze UI Modal Attributes:
- open: This is a boolean attribute used to set the initial state of the modal. if it is set modal will be opened initially.
- dismissible: This boolean attribute allows the modal to be closed by clicking on the close button or the overlay.
- full: This boolean attribute toggles the fullscreen style of the modal. If it is set modal will be fullscreen.
- ghost: This boolean attribute toggles the ghost style of the modal. If it is set, the modal will be a ghost modal without the body.
Syntax:
<blaze-modal open dismissible full ghost>
...
</blaze-modal>Example 1: The below example shows the use of open and dismissible attributes on the modal. It will be open by default and can be dismissed by clicking on the close button or the overlay.
<!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">
<title> Modal Attributes | Blaze UI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<style>
html {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Modal Attributes - Blaze UI
</h3>
</div>
<blaze-modal open dismissible>
<blaze-card>
<blaze-card-header>
<h2 class="c-heading u-super">
GeeksforGeeks
<div class="c-heading__sub">
A Computer Science Portal for Geeks.
</div>
</h2>
</blaze-card-header>
<blaze-card-body>
<p>
GeeksforGeeks is a online computer
science portal which offers content
related to various computer science
branches. It also offers courses for
GATE, DSA, Competitive Programming, etc.
</p>
</blaze-card-body>
</blaze-card>
</blaze-modal>
</body>
</html>
|
Output:
Example 2: This example shows the use of the ghost attribute on the blaze 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">
<title> Modal Attributes | Blaze UI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<style>
html {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Modal Attributes - Blaze UI
</h3>
</div>
<blaze-modal open dismissible ghost>
<h2 class="c-heading u-super">
GeeksforGeeks
<div class="c-heading__sub">
A Computer Science Portal for Geeks.
</div>
</h2>
<p>
GeeksforGeeks is a online computer
science portal which offers content
related to various computer science
branches. It also offers courses for
GATE, DSA, Competitive Programming, etc.
</p>
</blaze-modal>
</body>
</html>
|
Output:
Example 3: The below example shows the use of the full attribute on the modal to make it appear on fullscreen.
<!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">
<title> Modal Attributes | Blaze UI </title>
<link rel="stylesheet" href=
<script type="module" src=
</script>
<style>
html {
font-family: sans-serif;
text-align: center;
}
</style>
</head>
<body>
<div>
<h2 style="color: green;">
GeeksforGeeks
</h2>
<h3>
Modal Attributes - Blaze UI
</h3>
</div>
<blaze-modal open dismissible full>
<h2 class="c-heading u-super">
GeeksforGeeks
<div class="c-heading__sub">
A Computer Science Portal for Geeks.
</div>
</h2>
<p>
GeeksforGeeks is a online computer
science portal which offers content
related to various computer science
branches. It also offers courses for
GATE, DSA, Competitive Programming, etc.
</p>
</blaze-modal>
</body>
</html>
|
Output:
Reference: https://www.blazeui.com/objects/modals