@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

12 months ago

1 year ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

12 months ago

11 months ago

12 months ago

11 months ago

11 months ago

6 months ago

6 months ago

5 months ago

6 months ago

8 months ago

8 months ago

8 months ago

8 months ago

8 months ago

7 months ago

7 months ago

7 months ago

7 months ago

6 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

9 months ago

8 months ago

8 months ago

9 months ago

10 months ago

10 months ago

10 months ago

10 months ago

10 months ago

9 months ago

10 months ago

9 months ago

9 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

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

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

3 years ago

3 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

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 years ago

4 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

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