Blaze UI Modal Full screen
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 Modal Full Screen. Blaze UI modal full screen is a dialog box/popup window that is displayed on the full screen on top of the current page.
Blaze UI Modal full-screen classes:
- o-modal–full: This class creates a fullscreen modal.
Syntax:
<div role="dialog" class="o-modal
o-modal--full o-modal--visible">
...
</div>
Example 1: We will learn more about the modal full screen using the example. We will click on a button and a full-screen modal will be popped up.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
< body >
< h1 style = "color:green" >GeeksforGeeks</ h1 >
< h3 > Blaze UI Full Screen Modal</ h3 >
< button type = "button" class="c-button
c-button--brand" onClick = "openModal()" >
Show Full Screen Modal
</ button >
< div role = "dialog" class = "o-modal o-modal--full"
style = "background:gainsboro;" id = "modal" >
< button type = "button" class="c-button
c-button--close" onclick = "closeModal()" >
×
</ button >
< h1 class = "c-heading u-super" >
GeeksforGeeks is a computer science portal
</ h1 >
< h1 class = "c-heading u-xlarge" >
GeeksforGeeks is a computer science portal
</ h1 >
< h1 class = "c-heading u-large" >
GeeksforGeeks is a computer science portal
</ h1 >
< footer class = "c-card__footer" >
< button type = "button" class="c-button
c-button--brand" onClick = "closeModal()" >
Close
</ button >
</ footer >
</ div >
< script >
function closeModal() {
document.getElementById("modal")
.classList.remove("o-modal--visible");
}
function openModal() {
document.getElementById("modal")
.classList.add("o-modal--visible");
}
</ script >
</ body >
</ html >
|
Output:
Example 2: In this example, we will show that we can provide customized styling to the modal. We will create a modal with an image as a background and provide some styling to it.
HTML
<!DOCTYPE html>
< html >
< head >
< link rel = "stylesheet" href =
</ head >
background-repeat:no-repeat ;background-size: cover;">
< h1 style = "color:white" >
GeeksforGeeks
</ h1 >
< h3 style = "color:white" >
Blaze UI Full Screen Modal
</ h3 >
< button type = "button" class="c-button
c-button--success" onClick = "openModal()" >
Show Full Screen Modal</ button >
< div role = "dialog" class = "o-modal o-modal--full "
style = "background:white; " id = "modal" >
< button type = "button" class = "c-button c-button--close"
onclick = "closeModal()" >×</ button >
< h1 class = "c-heading u-super" >
GeeksforGeeks is a computer science portal
</ h1 >
< h1 class = "c-heading u-xlarge" >
GeeksforGeeks is a computer science portal
</ h1 >
< h1 class = "c-heading u-large" >
GeeksforGeeks is a computer science portal
</ h1 >
< footer class = "c-card__footer" >
< button type = "button" class = "c-button c-button--brand"
onClick = "closeModal()" >Close</ button >
</ footer >
</ div >
< script >
function closeModal() {
document.getElementById("modal")
.classList.remove("o-modal--visible");
}
function openModal() {
document.getElementById("modal")
.classList.add("o-modal--visible");
}
</ script >
</ body >
</ html >
|
Output:
References: https://www.blazeui.com/objects/modals/
Last Updated :
05 May, 2022
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...