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.

<p> Textabsatz

CSS - Navigation mit :target auf und zumachen

PHP - Zahlen schneller ausgeben

JavaScript - JavaScript über dem Form-Tag aufrufen

MySQL - Den nächsten und vorherigen Datensatz ermitteln