@orcden/od-modal NPM

A set of modals to display information to the user

<od-modal> is a simple component that can be given custom content. Can either hijack the user experience or not. <od-modal-alert> is a simple component that can be given custom content. It will hijack the user experience until the ok button is clicked. <od-modal-confirm> is a simple component that can be given custom message content. It will hijack the user experience until the ok button is clicked and return the users decision.

Installation

Install with npm

npm i @orcden/od-modal

Usage

import '@orcden/od-modal';

<od-modal id="modal" scoped><p>Test</p></od-modal>
<od-modal-alert id="alert" scoped><p>Test 2</p></od-modal-alert>
<od-modal-confirm id="confirm" scoped><p>Test 3</p></od-modal-confirm>

document.querySelector( "#alert" ).alert( 'This is an alert' ); //displays the alert
document.querySelector( "#confirm" ).confirm( 'This is a confirm' ); //displays the confirm

Attributes

Attribute	Type	Default	Description
`scoped`	Boolean	false	Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)
`active`	Boolean	false	Controls CSS to show/hide the modal.
`hijack`	Boolean	false	Can be set to hijack the user experience until stated otherwise in JS. This is always true in alerts and confirms

Properties

OD-Modal

Attribute	Type	Default	Description
`scoped`	Boolean	false	Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)
`active`	Boolean	false	Controls CSS to show/hide the modal.
`hijack`	Boolean	false	Can be set to hijack the user experience until stated otherwise in JS.

OD-Modal-Alert & OD-Modal-Confirm

Attribute	Type	Default	Description
`scoped`	Boolean	false	Can be set to tell the modal to scope itself to the next parent element with relative position (in CSS)
`active`	Boolean	false	Controls CSS to show/hide the modal.
`message`	String	''	Can be used to set the displayed message of the modal

Functions

OD-Modal

Name	Parameters	Description
`toggleModal`	None	Toggles the modal on and off

OD-Modal-Alert

Name	Parameters	Description
`toggleAlert`	None	Toggles the alert on and off
`alert`	message	Async. Displays the alert and waits for the user input. Displays the given string to the user

OD-Modal-Confirm

Name	Parameters	Description
`toggleConfirm`	None	Toggles the alert on and off
`confirm`	message	Async. Displays the confirm and waits for the user input. Displays the given string to the user. Returns the Users input choice

Styling

CSS variables are available to alter the default styling provided

Shadow Parts	Description
modal	The inner div used for the modal
content-box	On alerts and confirms this is the div that holds the buttons and message
mesage	On alerts and confirms this is the div that holds the text message
buttons-container	On alerts and confirms this is the div that holds the buttons
confirm-button	On alerts and confirms this is the OK button
confirm-button	On confirms this is the CANCEL button