o-overlay

CSS JS

Responsive, configurable overlays for displaying notifications to users

View on GitHub

Quick start

Using the build service

Add the following token to your script and link tags (how do I do that?):

o-overlay@^2.1.5

For more information see the Origami build service.

Using a manual build process

Run the following command in the root directory of your project, to add this dependency to your bower.json file:

bower install --save "o-overlay"@"^2.1.5"

For more information see the Origami build process.

Modal overlay


			

Standard modal. Includes a close button in the top left so the user can dismiss the overlay.

Modal without close button


			

Modal without a dismiss button in the top right. This should be used where the user has to make a choice or confirm they've seen something.

An overlay that is nested in the page


			

O-overlay can also be used to create overlays that don't sit in the front centre of the screen but appear in a specific area.

Component information

Latest stable version:
2.1.5 (5 days, 17 hours old)
Status (Learn more):
Active (as of 2.1.5)
Bundle sizes:
25.74KB JavaScript 4,106b CSS
This version
2.1.5 (5 days, 17 hours old)
Support status (Learn more):
Active (as of 2.1.5)
Last indexed
5 Dec 2017 14:52:04 (Build now)
Installable?
OK
Dependencies
ftdomdelegate ^2.0.1 OK 2.1.0
o-colors ^4.0.0 OK 4.1.5
o-dom >=0.4.0 <3 OK 2.0.6
o-hoverable >=0.2.0 <4 OK 3.1.4
o-icons >=4.0.0 <6.0.0 OK 5.4.3
o-layers >=0.2.0 <3 OK 2.0.6
o-normalise ^1.2.1 OK 1.5.2
o-viewport >=0.1.1 <4 OK 3.1.5
o-visual-effects ^2.0.0 OK 2.0.3
Dependents
alphaville-marketslive-chatalphaville-uikmt-headern-counter-ad-blockingn-interactive-tourn-myft-uin-syndicationn-uio-chato-comment-uio-tooltipwebchat

Contact

To talk to the team you can contact the Origami team on Slack channel #ft-origami or directly by email at origami-support@ft.com

Report an issue

Origami