Auf dieser Seite wird ein Modal vorgestellt, welches nur mit CSS und HTML erstellt ist. Javascript wird nicht benötigt.
Schaut euch den Quellext dieser Seite an.
Im ersten Teil wird nur das Modal mit HTML und CSS erstellt. Das CSS im ersten Teil dient zum großen Teil dazu, das Modal Element zu platzieren und dessen Inhalt mittig auszurichten. Außerdem wird es mit position:fixed aus dem Textfluss genommen, so dass es über dem gesamten Inhalt liegt.
Auf dieser Seite kommt das Einblenden des Modals hinzu.
Das Modal bekommt display:none, so dass es zu Anfang unsichtbar ist. Wenn man auf den Ankerlink klickt wird das Modal mittels :target auf display:table gesetzt.
Durch Klick auf das X oben rechts, wird die Seite neu geladen, so das das Modal wieder auf display:none gesetzt wird und somit unsichtbar ist.
