strc-modal-overlay

Symmetronic Modal Overlay

A modal overlay web component.

Using this component

Script tag

• Put the following script tag <script src='https://unpkg.com/strc-modal-overlay@1.0.1/dist/strc-modal-overlay.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, HTML, etc.

Node Modules

• Run npm install strc-modal-overlay --save
• Put the following script tag <script src='node_modules/strc-modal-overlay/dist/strc-modal-overlay.js'></script> in the head of your index.html
• Then you can use the element anywhere in your template, JSX, HTML, etc.

In a stencil-starter app

• Run npm install strc-modal-overlay --save
• Add an import to the npm packages import 'strc-modal-overlay';
• Then you can use the element anywhere in your template, JSX, HTML, etc.

API

Dynamic creation

The overlay can be dynamically added to the page using javascript

/* Create overlay. */
let overlay = document.createElement('strc-modal-overlay');
let text = document.createTextNode('Hello world');
overlay.appendChild(text);

/* Add overlay. */
document.body.appendChild(overlay);

Styling

You can adjust the style of the modal overlay using CSS variables.

strc-modal-overlay {
  --strc-modal-overlay-background-color: black;
  --strc-modal-overlay-background-opacity: 0.5;
  --strc-modal-overlay-foreground-color: white;
  --strc-modal-overlay-z-index: 5000;
}

NPM scripts

• npm install: Install dependencies
• npm start: Build in development mode
• npm run build: Build in production mode
• npm test: Run tests
• npm run test:watch: Run tests in interactive watch mode