Webseiten Hosting/Server Referenzen Kontakt/Impressum

How to check mails with Postfix (SASL/SSL), Anomy Sanitizer and Spamassassin with inbound-detection

<< Back to overview / Zurück zur Übersicht

If you want to display an overlaying message window that can be closed, you normally need JavaScript to hide the layer when the close-button is pressed.
But what to do if someone has disabled JavaScript? You need to do the work twice: Using a <script> for the closable window and a <noscript> block for a corresponding inline box with the same text-content (or some other technique).
To minimize the effort and to have an uniform output, a pure CSS-solution would be very great..
I was told that this is impossible but with some tricks and CSS3 this can finally be done. No JavaScript is required anymore!
I created a demo, tested with Firefox 3.5, Safari 4 and Opera 10.
IE8 still doesn't support the :checked-selector, so this demo won't work with IE8. Hopefully IE9 will be more CSS3-compliant, because I think this solution is the "cleanest" solution.

Pure CSS closable window demo
Because it doesn't work with IE, I searched for another solution. Inspired by this page (a CSS-lightbox), I wrote a second demo with a completely different approach.
Now it worked with IE, too - but instead it didn't worked with Opera :-(
But I was able to fix the problem :-)
This demo is successfully tested with: Firefox 3.5, Safari 4, Opera 10 and IE7:

Another pure CSS closable window demo

And because I was able to fix the Opera-problem in my CSS, I also fixed the given lightbox-example.
Copyright by Tobias Wiersch, 3D4X

Seite zuletzt geändert am: 23.01.2019