Skip to content
A simple modal box writen with #CSS. No #JavaScript is required.
HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
css
README.md
index.html

README.md

tip-off

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.

Demo

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

Demo

Advanced tip

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'; ?>"

Usage

• 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.

Final thoughts

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.

Credits

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

You can’t perform that action at this time.