simple modal box writen with #CSS. No #JavaScript is required. No pretentions, just for fun

At the very bottom of the #HTML before body ends, there is the modal lightbox. This box is an <a> element that has nothing inside and it is not shown unless it matches your conditions.

Along projects and responsive, mobile first, content first, human first thoughts come into play I fight with some scenarios where the navigation on small devices is better for the users when they handle theirs devices in portrait mode. Here is were tip-off is very handy because it lets you to show a little message to the user and close it easily, with no Javascript, just with few lines of CSS.

To see it in action just resize the browser to fit the height of the browser between 160px - 400px

Demo

The power of this modal box is based in the pseudo element :target. However eventually the href attribute could broke your URL when the modal box is clicked. In those situations you must find a solution like this href="< ?php echo $_SERVER['REQUEST_URI'].'#close'; ?>"

• Download or fork the repository.

• Include CSS file in your HTML.

• Customize or change the CSS file or the MESSAGE within the .tip-off pseudo element ::before.

Please, take this demo as it is, a little demo where I pretend to show to you the power of this snippet, but consider your own target before copy/paste.

• Feel free to download, modify, break, use or destroy this plugin.