0.3.143 • Published 8 months ago

@ne1410s/popup v0.3.143

Weekly downloads
7
License
MIT
Repository
github
Last release
8 months ago

@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).
Lightweightconfigurablepopup
@ne1410s/cust-elems
@infinitebrahmanuniverse/nolb-_ne1@everything-registry/sub-chunk-637@ne1410s/griddler
0.3.97

1 year ago

0.3.96

1 year ago

0.3.99

1 year ago

0.3.98

1 year ago

0.3.101

1 year ago

0.3.100

1 year ago

0.3.103

1 year ago

0.3.102

1 year ago

0.3.105

1 year ago

0.3.104

1 year ago

0.3.107

1 year ago

0.3.106

1 year ago

0.3.141

8 months ago

0.3.140

9 months ago

0.3.143

8 months ago

0.3.142

8 months ago

0.3.130

11 months ago

0.3.132

11 months ago

0.3.131

11 months ago

0.3.134

10 months ago

0.3.133

11 months ago

0.3.136

10 months ago

0.3.135

10 months ago

0.3.138

10 months ago

0.3.137

10 months ago

0.3.139

9 months ago

0.3.121

12 months ago

0.3.120

12 months ago

0.3.123

12 months ago

0.3.122

12 months ago

0.3.125

12 months ago

0.3.124

12 months ago

0.3.127

11 months ago

0.3.126

11 months ago

0.3.129

11 months ago

0.3.128

11 months ago

0.3.119

12 months ago

0.3.110

1 year ago

0.3.112

1 year ago

0.3.111

1 year ago

0.3.114

1 year ago

0.3.113

1 year ago

0.3.116

12 months ago

0.3.115

1 year ago

0.3.118

12 months ago

0.3.117

12 months ago

0.3.109

1 year ago

0.3.108

1 year ago

0.3.95

1 year ago

0.3.94

1 year ago

0.3.93

1 year ago

0.3.92

1 year ago

0.3.91

1 year ago

0.3.90

1 year ago

0.3.89

1 year ago

0.3.88

1 year ago

0.3.87

1 year ago

0.3.86

1 year ago

0.3.85

1 year ago

0.3.84

1 year ago

0.3.83

1 year ago

0.3.75

2 years ago

0.3.74

2 years ago

0.3.73

2 years ago

0.3.72

2 years ago

0.3.71

2 years ago

0.3.70

2 years ago

0.3.79

1 year ago

0.3.78

1 year ago

0.3.77

1 year ago

0.3.76

2 years ago

0.3.64

2 years ago

0.3.69

2 years ago

0.3.68

2 years ago

0.3.67

2 years ago

0.3.66

2 years ago

0.3.65

2 years ago

0.3.82

1 year ago

0.3.81

1 year ago

0.3.80

1 year ago

0.3.63

2 years ago

0.3.62

2 years ago

0.3.61

2 years ago

0.3.60

2 years ago

0.3.59

2 years ago

0.3.58

2 years ago

0.3.57

2 years ago

0.3.56

2 years ago

0.3.55

2 years ago

0.3.54

2 years ago

0.3.53

2 years ago

0.3.52

2 years ago

0.3.51

2 years ago

0.3.50

2 years ago

0.3.49

2 years ago

0.3.48

2 years ago

0.3.47

2 years ago

0.3.46

2 years ago

0.3.45

2 years ago

0.3.44

2 years ago

0.3.43

2 years ago

0.3.42

2 years ago

0.3.41

2 years ago

0.3.40

2 years ago

0.3.39

2 years ago

0.3.38

2 years ago

0.3.37

2 years ago

0.3.36

2 years ago

0.3.35

2 years ago

0.3.34

2 years ago

0.3.33

2 years ago

0.3.32

2 years ago

0.3.31

2 years ago

0.3.30

2 years ago

0.3.29

2 years ago

0.3.28

2 years ago

0.3.27

2 years ago

0.3.26

2 years ago

0.3.25

2 years ago

0.3.24

2 years ago

0.3.23

2 years ago

0.3.20

2 years ago

0.3.22

2 years ago

0.3.21

2 years ago

0.3.19

2 years ago

0.3.18

2 years ago

0.3.6

2 years ago

0.3.5

3 years ago

0.3.8

2 years ago

0.3.7

2 years ago

0.3.9

2 years ago

0.3.17

2 years ago

0.3.16

2 years ago

0.3.15

2 years ago

0.3.14

2 years ago

0.3.13

2 years ago

0.3.12

2 years ago

0.3.11

2 years ago

0.3.10

2 years ago

0.3.4

3 years ago

0.3.3

3 years ago

0.3.2

3 years ago

0.3.1

3 years ago

0.3.0

3 years ago

0.2.39

4 years ago

0.2.38

4 years ago

0.2.37

4 years ago

0.2.36

4 years ago

0.2.35

4 years ago

0.2.34

4 years ago

0.2.33

4 years ago

0.2.32

4 years ago

0.2.31

4 years ago

0.2.30

4 years ago

0.2.29

4 years ago

0.2.28

5 years ago

0.2.27

5 years ago

0.2.26

5 years ago

0.2.25

5 years ago

0.2.24

5 years ago

0.2.23

5 years ago

0.2.22

5 years ago

0.2.21

5 years ago

0.2.20

5 years ago

0.2.19

5 years ago

0.2.18

5 years ago

0.2.17

5 years ago

0.2.16

5 years ago

0.2.15

5 years ago

0.2.14

5 years ago

0.2.13

5 years ago

0.2.12

5 years ago

0.2.11

5 years ago

0.2.10

5 years ago

0.2.9

5 years ago

0.2.8

5 years ago

0.2.7

5 years ago

0.2.6

5 years ago

0.2.5

5 years ago

0.2.4

5 years ago

0.2.3

6 years ago

0.2.2

6 years ago

0.2.1

6 years ago

0.2.0

6 years ago

0.1.5

6 years ago

0.1.3

6 years ago

0.1.2

6 years ago

0.1.1

6 years ago

0.1.0

6 years ago

0.0.3

6 years ago

0.0.2

6 years ago