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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body > < h1 style = "color:green" >w3wiki</ 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" > w3wiki is a computer science portal </ h1 > < h1 class = "c-heading u-xlarge" > w3wiki is a computer science portal </ h1 > < h1 class = "c-heading u-large" > w3wiki 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 = "https://unpkg.com/@blaze/css@x.x.x/dist/blaze/blaze.css" > </ head > < body style="background: url(https://media.w3wiki.net/wp-content/cdn-uploads/titleShadow-1024x341.png); background-repeat:no-repeat ;background-size: cover;"> < h1 style = "color:white" > w3wiki </ 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" > w3wiki is a computer science portal </ h1 > < h1 class = "c-heading u-xlarge" > w3wiki is a computer science portal </ h1 > < h1 class = "c-heading u-large" > w3wiki 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/