-
Notifications
You must be signed in to change notification settings - Fork 5
/
modal.js
105 lines (97 loc) · 3.21 KB
/
modal.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
class Modal extends HTMLElement {
constructor() {
super();
this._modalVisible = false;
this._modal;
this.attachShadow({ mode: 'open' });
this.shadowRoot.innerHTML = `
<style>
/* The Modal (background) */
.modal {
display: none;
position: fixed;
z-index: 1;
padding-top: 100px;
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0,0,0,0.4);
}
/* Modal Content */
.modal-content {
position: relative;
background-color: #fefefe;
margin: auto;
padding: 0;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2),0 6px 20px 0 rgba(0,0,0,0.19);
-webkit-animation-name: animatetop;
-webkit-animation-duration: 0.4s;
animation-name: animatetop;
animation-duration: 0.4s
}
/* Add Animation */
@-webkit-keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
@keyframes animatetop {
from {top:-300px; opacity:0}
to {top:0; opacity:1}
}
/* The Close Button */
.close {
color: white;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: #000;
text-decoration: none;
cursor: pointer;
}
.modal-header {
padding: 2px 16px;
background-color: #000066;
color: white;
}
.modal-body {padding: 2px 16px; margin: 20px 2px}
</style>
<button>Open Modal</button>
<div class="modal">
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<slot name="header"><h1>Default text</h1></slot>
</div>
<div class="modal-body">
<slot><slot>
</div>
</div>
</div>
`
}
connectedCallback() {
this._modal = this.shadowRoot.querySelector(".modal");
this.shadowRoot.querySelector("button").addEventListener('click', this._showModal.bind(this));
this.shadowRoot.querySelector(".close").addEventListener('click', this._hideModal.bind(this));
}
disconnectedCallback() {
this.shadowRoot.querySelector("button").removeEventListener('click', this._showModal);
this.shadowRoot.querySelector(".close").removeEventListener('click', this._hideModal);
}
_showModal() {
this._modalVisible = true;
this._modal.style.display = 'block';
}
_hideModal() {
this._modalVisible = false;
this._modal.style.display = 'none';
}
}
customElements.define('pp-modal',Modal);