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.

<code> Logische Auszeichnung

CSS - Navigation mit :target auf und zumachen

PHP - Monatlich wechselnder Text

JavaScript - BBCode konvertieren oder entfernen

MySQL - Das Alter von Personen ermitteln

Tote Links
Hyperlinks (Links), die auf eine nicht vorhandene Datei verweisen, heißen "tote Links". Klickt man darauf, erscheint eine Fehlermeldung. Solche toten Links machen einen unprofessionellen Eindruck. Es gibt aber Tools, die Webseiten auf tote Links überprüfen können.