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.

<wbr> Zeilenumbruch erlauben

CSS - Diashow mit Keyframes

PHP - Dateinamen trennen

JavaScript - Prüfen, ob die Funktion vor dem Aufruf vorhanden ist

MySQL - Bilder in einer Datenbank-Tabelle speichern und ausgeben

Alternativen Text bei Grafiken vergessen
Geben Sie bei jeder Grafik einen alternativen Text an. Dies können Sie mit dem Zusatz alt="IhrText". Dieser Text wird immer dann angezeigt, wenn die Grafik noch nicht geladen wurde oder der Besucher Grafiken deaktiviert hat. Angezeigt wird er auch, wenn der Besucher mit dem Mauszeiger über die Grafik fährt.Vor allem behinderte Menschen sind auf den alternativen Text angewiesen und auch Suchmaschinen durchsuchen den Text nach Stichworten. Grafiken ohne wirklichen Nutzwert sollten Sie mit alt="" versehen. Vorsicht ist bei manchen Webseite-Editoren geboten, die automatisch völlig sinnlose Alternativtexte einfügen.