Dialogbox made simple !

Simple way to handle alerts in your website!

What is dialog box ? ;
HTML 〈 dialog〉 tag is used to create a new popup dialog on a web page. This tag represents a dialog box or other interactive component like window.
The element uses a boolean attribute called open that activate element and facilitate user to interact with it.
HTML dialog is a new tag introduced in HTML5.

here i have just created some demo that what can you do using this, other you can style create your best.

index.html

HTML Code

 <body>
        <div class="main">
            <h2>Dialog Tutorial</h2>
            <!-- button for opening dialog -->
            <button id="open">Did you know ?</button>
            <p>
                Add your lorem
            </p>

            <div class="container">
                 add your whatever !
            </div>
        </div>

        <dialog class="modal">
            <h2>This alert is created using dialogbox !</h2>
            <p id="dontselect">
                browser support for dialog is not that best, but 
                still the best
                You can style what ever you like for this dialog !
            </p>
            <button id="close">close</button>
        </dialog>
    </body>

*Here i just created the simple styling i have not focused on it *
index.css

.modal {
    max-width: 30em;
}

.container {
    text-align: justify;
    background: #333;
    color: white;
    padding: 3rem;
    aspect-ratio: 1/1;
    min-height: 10em;
    min-width: 10em;
    max-width: 40em;
    max-height: 20em;
    width: min(100% - 2em, 100px);
    margin-inline: auto;
    resize: both;
    border: 2px solid #000000;
    overflow: auto;
}

.modal::backdrop {
    background: #2c272e;
    opacity: 0.5;
}

.noscroll {
    /* background: red; */
    overflow: hidden;
}

This is your javascript file !

app.js

const btnopen = document.getElementById('open');
const close = document.getElementById('close');
const dialog = document.querySelector('dialog');
const body = document.querySelector('body');

btnopen.onclick = function () {
    dialog.showModal();
    body.classList.add('noscroll');
};

close.onclick = function () {
    dialog.close();
    body.classList.remove('noscroll');
};

Styling and others part i haven't focused i just showed how can you work with dialog in javascript. Browser support is not 100% best but best than a lot and you can start implementing this.

Check my portfolio : neeswebservices
My youtube : neeswebservices

Thanks for Reading !!

Blog

Dialogbox made simple !

Nischal Dahal

HTML Code

Join Our Newsletter. No Spam, Only the good stuff.

Related