The **Modal** may be used by either the global stylesheet or module import. ##### Global Stylesheet and JavaScript The **Modal** will display correctly with the global stylesheet. ```html ``` The **Modal** requires JavaScript for showing, hiding, and screen reader accessibility. To initialize the **Modal** instance from the global script use the following code: ```html ``` This function will attach the **Modal** toggling event to the body of the document. ##### Stylesheet and JavaScript Module Import The **Modal** includes two stylesheets. One sets the default design tokens using CSS Custom Properties, and another adds custom styles. ```scss @forward '@nycopportunity/pattern-modal/src/tokens.css'; @forward '{{ this.package.name }}/objects/modal/_modal.scss'; ``` The **Modal** JavaScript source exists in the Pattern Modal module, which is a dependency of the {{ this.package.nice }}. ```javascript import Modal from '@nycopportunity/pattern-modal/src/modal'; new Modal(); ```