Modal

Notes for developers

Content can only be loaded in to a modal either from within the current page itself or from another page on the same domain. All modal content must be available when there is no JavaScript and in older browsers.

Content being loaded into the modal in sanitised prior to injection to the modal, meaning any inline JavaScript will not be run.

To include a button that closes the modal window, add the class a-button--cancel to the button; these buttons are not displayed if the user does not have JavaScript or is using an older browser.

When pulling in content from another page, if an id is included within the link, the content contained within the element with the matching id will be used to populate the modal, otherwise all the body will be used.

Always use t-accent-light t-accent-light--1 to reflect the latest design standards

Controling modals programatically

Modals can be controlled programatically to open, close or destroy a particular modal.

A simple event listener has been included with options to either just close the modal, or to close the modal and remove the loaded content from the page (thus clearing the form). This can be run using the following code:

utility.trigger( window, 'modal:close' );

utility.trigger( window, 'modal:destroy');

For more information on this, see our page on how to add Javascript to Framework components.

Alternatively, an API is available offering the following methods (please note that these are only available when associated with a valid modal link):

For example:

document.addEventListener( 'frameworkready', function () {
	FRAMEWORK.require([ 'blocks/o-modal' ], function ( oModalModule ) {
		var modalLinkEl = document.querySelector( '#modalId' ),
			modalInstance = oModalModule.initInstance( document.documentElement );		modalInstance.open( modalLinkEl );
	});
});

Changing locale settings

Default text for the close link, loading indicator and content label for assistive technologies can be changed for a particular locale.

en: {
	oModal : {
		closeText : 'Close',
		loadingText : 'Please wait',
		contentLabel : 'Modal content',
	},
},

For more information on this, see our page on how to change locale settings within JavaScript.

---

Notes for testers

• Ensure that links can be accessed via the mouse as well as via tabbing using the keyboard.
• Use a screen reader to confirm that the links are understandable as to where they will be going when listed out of context of the page.
• Ensure that when hovering over a link the style changes noticeably.
• Ensure that when a link has focus the style changes noticeably.
• Ensure that when a modal is open focus remains within the o-modal.
• Ensure that when JavaScript is not available, or for older browsers such as IE8, that any links to open modals still take the user to the content (either on the page but not displayed in the modal, or via an external link).
• Ensure that any modules such as show/hide, tabs etc that are contained within a modal's content work as expected.
• Ensure it is clear how to close the window - by clicking outside of the window, by the use of prominent close buttons and also by using the ESC key.
• There should be a clear visual distinction between the window and the background, which should be greyed out or faded. The user should not be able to to scroll or interact with background content.
• Focus should be returned to its original place when the window is closed.

---

Classes overview

The following table gives you a quick overview of the CSS classes that can be applied.

---

Keyboard operations

TAB

Tabbing to an anchor should make the anchor clearly visually different so that the focus point on the page is obvious to the user

SPACE or ENTER

With focus on an anchor, pressing SPACE or ENTER will open the link. If the link is internal to the page it will scroll the page otherwise it will load the new page.

ESCAPE

With a modal visible, pressing ESCAPE will close the modal, if close has not been disabled.