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.

<video> Video-Datei

CSS - DiscoLights - Box-Shadow Animation

PHP - Mnemonisches Passwort erstellen

JavaScript - Zeichenkontrolle

MySQL - Zufällige Datensätze auslesen

Schlagwörter einfügen
Wenn Sie zum Beispiel eine Homepage über Pferde haben, verwenden Sie in Ihren Texten viele Schlagwörter, die mit dem Thema der Seite zu tun haben. Überlegen Sie nach welchen Suchbegriffen der Besucher mit der Suchmaschine sucht. (Namen von Pferderassen, Pferdebilder, Galopp, Springreiten, ...).
Dabei wird nach einfachen Schlagwörtern häufiger gesucht als nach speziellen Schlagwörtern.