Represents an Overlay.
Construct an overlay.
| parameter | type | default | description |
|---|---|---|---|
| id | HTMLElement | String. A unique identifier for the overlay within the page. (Required) | |
| opts | object | An options object for configuring the Overlay. This object MUST have either `src` or `html` set. (Required) | |
| opts.heading.title | string | Your overlay's title | |
| opts.heading.visuallyhidetitle | boolean | If you want to provide a different title style, this option will prevent the title span from being added to the overlay. (In this case the title is only used for aria labelling) Default: false. | |
| opts.heading.shaded | boolean | Whether to shade the background of the header. Default: to false | |
| opts.modal | boolean | Whether the overlay should have modal behaviour or not. Setting this as true will add a translucent shadow between the page and the overlay | |
| opts.compact | boolean | If true, the .o-overlay--compact class will be added to the overlay that reduces heading font-size and paddings in the content. | |
| opts.src | string | Either a url from which HTML to populate the overlay can be loaded, or a querySelector string identifying an element from which the textContent should be extracted. | |
| opts.html | string | String or HTMLElement. Raw HTML (cannot be set declaratively) | |
| opts.trigger | string | querySelector expression or HTMLElement. When there's a trigger set, a click event handler will be added to it that will open or close the overlay accordingly. (cannot be set declaratively) | |
| opts.zindex | string | Value of the CSS z-index property of the overlay. Default set via CSS: '10' | |
| opts.preventclosing | boolean | Prevents closure of overlay via standard x button or escape key. For use when you are directing the user to somewhere else. Only valid with modal set to true. | |
| opts.customclose | boolean | If you do not use the heading, but want to provide a close button in your html / src (with a class of o-overlay__close), setting customclose to true will attach o-overlay's close handler function to that button. | |
| opts.parentnode | string | Should be a query selector for a DOM element. If set, the overlay will be appended as a child of this rather than the document body or target. If multiple nodes are matched, it will use the first. If nothing matches this selector, the body will be used. | |
| opts.nested | boolean | If set to true, the resize, escape, and layer listeners will not be set up. This boolean should be used in conjunction with the parentnode setting to allow an overlay to be positioned within a DOM element rather than overlaid on top of everything. Default: false. | |
| opts.nofocus | boolean | If set to true, the tabindex will not be set on the wrapper element. Useful in conjunction with the nested and parentnode options. Default: false. | |
| opts.fullscreen | boolean | If set to true, the overlay will display full screen. This overlay disables scroll on the underlying document and is dismissible with the back button. |
Show the overlay
Ready event
| property | type | description |
|---|---|---|
| instance | the firing instance |
If using the Build Service, add o-header@^11.0.6 to your
script and link tags.
If using the npm package manager for a Manual Build, run npm install --save-peer "@financial-times/o-header@^11.0.6".
o-header is maintained directly by the Origami team. If you have any questions about o-header or Origami in general, we are happy to help. 😊
Slack: #origami-support
Email: origami.support@ft.com
To report a bug or request features please create an issue on Github. For support or general feedback please get in touch 😊
Slack: #origami-support
Email: origami.support@ft.com