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 !!
Top comments (0)