Focus is a minimal popup, modal, overlay, notification, drawer and dialogue window plugin built by Elkfox.
- jQuery >= 1.3
- Under 4 KB
- Easy to use data API
- jQuery events
focus.min.js from the repository.
Include the script in your html file.
Or if you’re using Shopify include the following in your
Optionally include the styles located in the css directory of the repository.
Include add a popup with this basic structure.
Now whenever someone clicks the “Click Me” button it will open the
#examplePopup popup which
contains a button to close the modal. Pretty easy!
Note that the data-close doesn’t have a data-target attribute. When this is the case data close will close the popup that it is contained within.
Here we also use
.popup-inner to close the popup when a user clicks outside of the popup.
The user can also use the escape key to close popups.
Here we are using the simple data api to get started which consists of the following:
Say for example when a user scrolled a specific part of the page.
Scroll to here I dare you 👻
You may wish to configure your popup with some settings that are different to the defaults used above. You can control these on a per popup basis using the
||string||Set the visible class that gets added to show the popup.|
||string||Class name applied to the body when the popup is opened.|
||string||Set the selector for the area outside of the popup, when clicked the popup will close.|
||string||Set the selector of an input field that you would like to be focused when the popup opens.|
||string||Set the selector of the popups content.|
The following events occur when opening, closing, or toggling a popup
|focus:open||None||Fires when a popup has finished opening|
|focus:close||None||Fires when a popup has finished closing|
|focus:error||error (String)||Fires when an event cannt open or close. Passes the error the event|
We provide some css and scss files located in the
css/ folder that has been pulled from our in house framework Concrete. Variables located at the top of the file are the easiest ways to modify the colours of the popup.
Table Of Classes
|.popup||The parent class of the popup.
Should be added to the starting element of every popup to apply styling.
|.overlay||When added to the starting element of the div this will open the popup with an opaque background overlay|
|.full-screen||Opens a 100% width and 100% height popup.|