Skip to content
Related Articles
Open in App
Not now

Related Articles

Blaze UI Modal Full screen

Improve Article
Save Article
  • Last Updated : 05 May, 2022
Improve Article
Save Article

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/


My Personal Notes arrow_drop_up

Start Your Coding Journey Now!