Overlay – JQuery

I researched JQuery and overlays as the project brief asks we include an element of Flash or JQuery.

JQuery allows you to add popups or overlays, example of overlays and popups below.

Screen Shot 2016-01-06 at 20.11.26






Screen Shot 2016-01-06 at 20.13.08













Examples of JQuery overlays in this project design.

  1. Date Selection or Date Picker.  When the user clicks in the date input field a calendar small overlay is displayed.  The user chooses a date and the date is returned to the date input field.  This helps reduce user input error as they are not actually typing the date into the field.


Screen Shot 2016-01-09 at 14.58.30 Screen Shot 2016-01-09 at 14.59.11

2. Overlay shows image when user hovers or clicks on ‘TRANSFORM YOUR HEALTH’ below:













How overlay will look: