@ne1410s/popup NPM

@ne1410s/popup

A lightweight & configurable modal popup.

<ne14-pop>
  <p>Hello world</p>
</ne14-pop>

Use: <script src="PATH_TO_UMD_SCRIPT"></script>
Extend: npm i @ne1410s/popup

Attributes

<ne14-pop move resize>YO' STUFF<ne14-pop></ne14-pop></ne14-pop>

move: User can drag the popup around
resize: User can alter the size of the popup
shrink: (Requires resize: User can reduce size below that initially presented)
open: The popup is opened immediately
no-close: The close icon is not made available
style: If supplied inline, the following styles are propagated to the element. They are fairly self-explanatory
- background-color
- border-radius
- box-shadow

Events

const pop = document.querySelector('ne14-pop');

pop.addEventListener('open', () => {
  console.log('Just opened!');
});

open: Fired when the popup is opened
close: Fired when the popup is closed
confirmaccept: Fired when the confirm callback allowed the popup to close
confirmreject: Fired when the confirm callback prevented the popup from closing
dismissaccept: Fired when the dismiss callback allowed the popup to close
dismissreject: Fired when the dismiss callback prevented the popup from closing

Methods

open(): Opens the popup
close(): Closes the popup
wrap(): Wraps existing html element(s) in a new popup
confirm(): Closes the popup, unless confirmCallback is provided and returns false
dismiss(): Closes the popup, unless dismissCallback is provided and returns false.

Properties

confirmCallback: () => boolean: Return false to prevent a call to confirm from closing the popup
dismissCallback: () => boolean: Return false to prevent a call to dismiss from closing the popup

CSS Variables

Some degree of custom styling can be provided, by way of css variables:

ne14-pop {
  --background: rgba(0, 0, 0, 0.5);
  --border-radius: 5px;
  --box-shadow: 5px 5px 20px black;
}

--background Background behind the popup. Defaults to: rgba(0, 0, 0, .85)
--border-radius Border radius for the popup.
--box-shadow Box shadow for the popup (when stationary).

Lightweight configurable popup

@ne1410s/cust-elems

@infinitebrahmanuniverse/nolb-_ne1 @everything-registry/sub-chunk-637 @ne1410s/griddler

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

11 months ago

12 months ago

11 months ago

11 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

12 months ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

1 year ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

3 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

2 years ago

3 years ago

3 years ago

3 years ago

3 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

5 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago

6 years ago