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.

<object> Objekt

CSS - Sternebewertung

PHP - Zufallszahl anzeigen

JavaScript - Darstellungsmodus überprüfen

MySQL - Datensatz aktualisieren