Origami Frontend Components & Services

JSDoc: o-header

new Overlay(...)

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 - (instance) Show the overlay



Instance Method

Show the overlay

Fires Event



Type: object

Ready event

property type description
instance the firing instance


Switch component view

GitHub: o-header@11.0.6

Install o-header

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".

Help & Support

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

Feedback / Issues

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