Notification Popover avec JavaScript
HTML
index.html <form>
<input type="number" min="100" max="300" name="name" />
<button type="submit">valider</button>
</form>
<div id="error" popover="manual" role="alert"><span></span><button popovertarget="error" popovertargetaction="hide">X</button></div>
<div id="success" popover="manual" role="alert"><span></span><button popovertarget="success" popovertargetaction="hide">X</button></div>
CSS
style.css @layer demo {
[popover] {
position: fixed;
inset-inline: auto 2vw;
top: 2vw;
color: white;
background-image: linear-gradient(
45deg,
black,
color-mix(in oklch, var(--border-color), black)
);
box-shadow: 0 0 25px 5px hsla(0deg 0% 0% / 100%);
border: 1px solid var(--border-color);
display: flex;
gap: 1rem;
&:popover-open {
padding: 1rem;
button {
display: block;
}
}
button {
display: none;
border-radius: 100vmax;
border: none;
aspect-ratio: 1;
width: 1.5rem;
color: white;
background: black;
border: 1px solid var(--border-color);
}
}
}
@layer demoStyles {
:root {
--border-color: green;
}
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
form {
display: flex;
flex-direction: column;
gap: 2rem;
}
input {
padding: 0.5rem 1rem;
width: 30vw;
}
button[type="submit"] {
padding: 0.5rem 1rem;
border: 0;
border-radius: 100vmax;
}
[id="success"] {
--border-color: green;
}
[id="error"] {
--border-color: red;
}
}
JavaScript
script.js const form = document.querySelector("form");
const button = document.querySelector("button");
const input = document.querySelector("input");
const errorAlert = document.querySelector("#error");
const successAlert = document.querySelector("#success");
const closeAlertBtns = document.querySelectorAll("[popover] > button");
button.addEventListener("click", (e) => {
e.preventDefault();
if (!input.checkValidity() || input.value === "") {
errorAlert.querySelector("span").innerHTML =
input.validationMessage || "Champ obligatoire";
errorAlert.showPopover();
} else {
successAlert.querySelector("span").innerHTML = "Champ valide";
successAlert.showPopover();
}
});
[...closeAlertBtns].forEach((closeBtn) => {
closeBtn.addEventListener("click", (e) => {
e.currentTarget.previousSibling.innerHTML = "";
});
});