Time Delay Popup Image
The popup window loads an image which can also be configured as a hyperlink to open an internal or external page or file. The link has an open in a new window option.
Although the modal can be closed by clicking or tapping anywhere on the overlay, there is an optional "close" button which appears at the upper right of the modal.
There is a background overlay which 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.
The optional, overlay caption can be styled and aligned left, center or right and has a line height adjustment for when the caption extends to two or more lines. The caption background can be styked for background color and opacity.
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 milliscends.
The overlay color is set to black with 80% opacity.
The modal is responsive so that it can be used on the mobile version of the site or on fully responsive pages.