HTML - Dialog-Box
<style>
dialog {
top: calc(10vh - 135px);
display: flex;
flex-direction: column;
border: Solid 1px #000000;
box-shadow: 0px 0px 12px 5px #888888;
}
dialog>p {
font-family: Verdana, Arial, Sans-Serif;
font-size: 1rem;
}
dialog::backdrop { // Unterstützung für Dialogelemente
/* background-color: rgba(0, 0, 0, 0.7); */
backdrop-filter: blur(5px);
}
button#close-modal {
display: flex;
align-self: flex-end;
padding: 3px;
border: 1px solid #000000;
cursor: pointer;
transition: 500ms all;
}
button#close-modal:hover {
background-color: #ff0000;
color: #ffffff;
}
button#close-modal:focus-visible {
outline: none;
}
</style>
<dialog>
<button id="close-modal" title="Dialog-Box schließen">X</button>
<p>Das ist eine Dialog-Box Nachricht!</p>
</dialog>
<script>
const modal = document.querySelector("dialog");
modal.showModal();
document.querySelector("#close-modal").addEventListener("click", e => {
modal.style.display = "none";
modal.close();
});
</script>
Siehe auch: HTML - <dialog>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<hr> Trennlinie
CSS - Markierte Checkbox farbig hervorheben
PHP - Ausgabe von Wörtern begrenzen