Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
css
 
 
 
 
 
 

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.

About

A simple modal box writen with #CSS. No #JavaScript is required.

Resources

Releases

No releases published

Packages

No packages published