CSS - Modal-Fenster mit HTML5 und CSS3

Ganz ohne JavaScript lässt sich dieses Modal-Fenster öffnen und wieder schließen.

Siehe auch: CSS - Lightbox

X

Modal-Fenster

Dies ist ein modales Fenster, das mit HTML5 und CSS3 erstellt wurde.


<style>

.
modalDialog {
 
positionFixed;
 
font-familyVerdanaSans-Serif;
 
top0;
 
right0;
 
bottom0;
 
left0;
 
background-colorrgba(0000.6);
 
z-index99999;
 
opacity0;
 
transitionopacity 400ms ease-in;
 
pointer-eventsNone;
}

.
modalDialog:target {
 
opacity1;
 
pointer-eventsAuto;
}

.
modalDialog div {
 
width400px;
 
positionrelative;
 
margin10Auto;
 
padding5px 20px 13px 20px;
 
border-radius10px;
 
background-color#FFFFFF;
 
backgroundlinear-gradient(#FFFFFF, #999999);
 
cursor: Default;
}

.
close {
 
background-color#606061;
 
color#FFFFFF;
 
line-height25px;
 
positionAbsolute;
 
right: -12px;
 
text-alignCenter;
 
top: -10px;
 
width24px;
 
text-decorationNone;
 
font-weightBold;
 
border-radius12px;
 
box-shadow1px 1px 3px #000000;
}

.
close:hover {
 
background-color#00D9FF;
}
</
style>

</
head>
<
body>

<
a href="#openModal">Modal-Fenster öffnen</a>

<
div id="openModal" class="modalDialog">
 <
div>
  <
a href="#close" title="Schließen" class="close">X</a>
  <
h2>Modal-Fenster</h2>
  <
p>Dies ist ein modales Fensterdas mit HTML5 und CSS3 erstellt wurde.</p>
 </
div>
</
div>

Modal-Fenster automatisch öffnen

<script>
setTimeout(function() { 
 window.location.href="#openModal";

}, 2500); // Verzögerung in Millisekunden
</script>

Bausteine  Alle Anzeigen

Eine zufällige Auswahl von Codeschnipseln aus den Bereichen HTML, CSS, PHP, JavaScript und MySQL.

<div> Allgemeines Block-Element

CSS - HTML-Elemente als Tabelle formatieren

PHP - Zufallszahl anzeigen

JavaScript - Checkboxen JavaScript-Funktion zuweisen

MySQL - Höchstwert einer Tabellenspalte ermitteln

Lernen beim Arbeiten
Viele Fehler werden beim Arbeiten an der Homepage erkannt und im weiteren Verlauf vermieden (Etwas daraus gelernt!). Auch das Lernen durch Ausprobieren, zum Beispiel einen bestimmten Wert einfach erhöhen und sehen was dann passiert ist sehr lehrreich.