This website is made possible by …
This widget was designed to open a time delay modal with image links to sponsors, suppliers, associated websites etc.
The popup window has an optional heading and text and a number of image links with caption. The links can be internal or external and open in a new window if required
There is a "close" button which appears at the upper right of the modal.
The background overlay can be styled for color and its opacity adjusted so that, when the modal is visible, the rest of the page content can be either blacked out, partially or fully visible.
The modal itself can by styled with a box shadow and/or border with border radius.
The time delay from page load to when the modal opens is set in seconds. The modal has a fade in and out animation - both of which can be set separately in milliseconds. Best results are obtained by using a longer fade in of 1000 milliseconds or more and a shorter fade out time of about half that.
In this example, the time delay is set to 3 seconds, the fade in animation time is 1500 milliseconds and the fade out is set to 500 milliseconds.
In this demo, each image was created by dropping the logo onto a white page in Keynote, taking a screenshot and cropping it to 200px x 150px using EasyCrop. It can just as easily be done by dropping the logos onto a blank page in EverWeb and using Preview to take the screenshot, crop and size the images.
The number of images per row is entered and CSS calc used to set the appropriate percentage width for each.
The modal is responsive so that it can be used on the mobile version of the site or on fully responsive pages.