Object-Oriented W3 Modal

W3-CSS based modal managed by a JavaScript object.

This library manages a shadow DOM with complete W3 CSS styling inside. It does not affect the styles of anything outside the modal.

Installation and Use

Install this repo as an npm dependency:

npm i object-oriented-w3-modal

Then,

import { W3Modal } from "object-oriented-w3-modal"

Usage

Constructor Argument(s)

An optional init options argument can be passed to the constructor.

| Field | Type | Explanation | | -------------- | ----------- | --------------------------------------------------------------------- | | html | string | The HTML code for the content of the modal | | contentElement | HTMLElement | Element node for the content of the modal. Cannot co-exist with html. | | header | string | Text to put on the header of the modal | | footer | string | Text to put on the bottom of the modal |

Instance Methods

Instances have the following self-explanatory methods:

• open()
• close()
• toggle()

Access the .content getter to get access to the content HTML node.