Modal

Installation#

For detailed instructions, view our install section in this documentation. Make sure all of the dependencies and polyfills are loaded to make the component cross-browser compatible.

CDN#

<script src="https://unpkg.com/@pearson-ux/modal"></script>

NPM#

npm i @pearson-ux/modal --save

Demo#

Default#

  <pearson-modal          class="hidden"          triggerid="trigger-modal"          titletext="Basic Title"          successbtntext="Success"          cancelbtntext="Cancel"          footer          >    <div>      <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. In massa tellus, porta in venenatis eget, pulvinar in arcu. Ut eu cursus augue. Sed eget tempus sem, nec suscipit justo. Cras sit amet accumsan massa, non elementum erat. Quisque et ultricies risus. Mauris id feugiat metus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Cras quis libero a urna eleifend placerat. Nunc varius lorem at commodo viverra. Vivamus lobortis diam et nibh tempor, vitae laoreet sapien auctor. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>    </div>  </pearson-modal>

Structure#

Follow these steps to successfully build out a modal window.

First we'll create a button element that triggers the modal.

In this example well create a basic button with a unique Id to pass into the modal. Well use #trigger-modal in this example

<button class="gr-btn" id="trigger-modal">Open Modal</button>

Next add the <pearson-modal> tag after the closing <main id="main"></main> element.

Then add an attribute of triggerid to the modal with the value of the id of the <button> This tells the modal which button to listen to.

You need to place the modal element after the main tag.

<body>    <main id="main">        <button class="gr-btn" id="trigger-modal">Open Modal</button>    </main>
    // add the modal after the closing main tag    <pearson-modal triggerid="trigger-modal"> </pearson-modal></body>

Then, add any custom markup you want displayed in the modal. This can include any HTML5 element.

<body>    <main id="main">        <button class="gr-btn" id="trigger-modal">Open Modal</button>    </main>
    // add the modal after the closing main tag    <pearson-modal>        <p>Playground World</p>    </pearson-modal></body>

Finally, add an event listener on the button to trigger the modal.

<script>const button = document.querySelector('#trigger-modal'),modal = document.querySelector('pearson-modal');button.addEventListener('click', event => {  modal.open = true})</script>

Important note: You can optionally build the modal programatically by creating a <pearson-modal> element and adding the required or optional attributes.

API#

Required#

All these attributes are required.

Attribute	Type	Default	Description
`triggerid`	`String`	Required	The unique ID of the button that opens the modal.

Optional#

All these attributes are optional.

Attribute	Type	Default	Description
`open`	`Bool`	`Unset`	If set true, modal opens. If attribute removed, close modal.
`titletext`	`String`	`Modal Title`	The title of the modal.
`footer`	`Boolean`	`false`	If set, shows the `Success` and `Cancel` buttons.
`successbtntext`	`String`	`'Save'`	The text to display in the `Success` button.
`cancelbtntext`	`String`	`'Cancel'`	The text to display in the `Cancel` button.
`hidecancel`	`Boolean`	`false`	Hides the Cancel button completely
`hidesuccess`	`Boolean`	`false`	Hides the Success/CTA button completely
`showonload`	`Bool`	`false`	Set this attribute if you want to modal to fire without a button.

Events#

The pearson-modal component emits two different events:

Event	Description
`success`	Will fire when the success button in the modal is pressed.
`cancel`	Will fire when any button other than the success buton is pressed, or when the user closes the modal with the `escape` key.

const modal = document.querySelector('pearson-modal');
modal.addEventListener('success', () => {  // Do something});
modal.addEventListener('cancel', () => {  // Do something});

HTML Markup#

Do you want to use your own JS to make the modal function? No problem, use the markup below along with CSS to build a modal with your own JS.

Important note: You can follow the UXF guidelines to view the suggested functionality of the modal window.

Here are some basic practices to make sure the modal you build is accessible.

<div id="modalContainer" class="gr-modal-container">    <div id="modalOverlay"></div>    <div class="modal" role="dialog" aria-labelledby="dialog-heading" aria-describedby="dialog-description"         aria-modal="true">        <h2 id="dialog-heading" class="gr-h2">Modal Dialog Title</h2>        <div class="modal-body" id="dialog-description">                <p>Pass in JSX elements as children to the modal, You must pass in the text object with valid strings</p>        </div>        <div class="actions">            <button id="lastButton" class="gr-btn primary">Success Button</button>            <button id="firstButton" class="gr-btn">Cancel Button</button>        </div>    </div></div>