HTML - Dialog-Box

Das ist eine Dialog-Box Nachricht!


<style>

  
dialog {
    
topcalc(10vh 135px);
    
displayflex;
    
flex-directioncolumn;
    
borderSolid 1px #000000;
    
box-shadow0px 0px 12px 5px #888888;
  
}

  
dialog>{
    
font-familyVerdanaArialSans-Serif;
    
font-size1rem;
  }

  
dialog::backdrop { // Unterstützung für Dialogelemente
    /*  background-color: rgba(0, 0, 0, 0.7); */
    
backdrop-filterblur(5px);
  }

  
button#close-modal {
    
displayflex;
    
align-selfflex-end;
    
padding3px;
    
border1px solid #000000;
    
cursorpointer;
    
transition500ms all;
  }

  
button#close-modal:hover {
    
background-color#ff0000;
    
color#ffffff;
  
}

  
button#close-modal:focus-visible {
    
outlinenone;
  }
</
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"=> {
    
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.

<tr> Tabellenzeile

CSS - Checkboxen und Radiobuttons farblich anpassen

PHP - Zufallszahl anzeigen

JavaScript - HTML-Details automatisch schließen

MySQL - Benutzer ausgeben die min. 25 Tage registriert sind

Thematische Links
Beim Einsatz von externen Links ist stets im Hinterkopf zu behalten, ob der Sprung (Link) thematisch sinnvoll ist und nicht die Gedankengänge für den Leser unterbricht anstatt ergänzt.