Modal

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.

<link href="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/css/default.css" rel="stylesheet">

The Modal requires JavaScript for showing, hiding, and screen reader accessibility. To initialize the Modal instance from the global script use the following code:

<script src="https://cdn.jsdelivr.net/gh/nycopportunity/standard@v0.0.20/dist/js/default.js"></script>

<script>
  var Standard = new Default();

  Standard.modal();
</script>

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.

@forward '@nycopportunity/pattern-modal/src/tokens.css';
@forward '@nycopportunity/standard/objects/modal/_modal.scss';

The Modal JavaScript source exists in the Pattern Modal module, which is a dependency of the Opportunity Standard.

import Modal from '@nycopportunity/pattern-modal/src/modal';

new Modal();