Full screen modal

Notes for developers

Content can only be loaded in to a full screen modal from another page on the same domain. All modal content must be available on a separate page 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. This will close the modal but retain any content contained on the form within it in case the user returns to the modal.

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 and the loading indicator can be changed for a particular locale.

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

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 take the user to a separate page containing the relevant content.
• 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 the use of a prominent close buttons and also by using the ESC key.
• Ensure it is clear how to submit the form in the modal
• Ensure that the submit button closes the modal and causes the form fields within it to be emptied so that they are clear next time it is opened.
• There should be a clear visual distinction between the window and the background, which should be completely hidden from view by the modal. 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 without submitting any form content. Any entered data should be retained for when the modal is reopened.