/
OOP_project.html
103 lines (89 loc) · 2.02 KB
/
OOP_project.html
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
<!DOCTYPE html>
<html>
<head>
<title>OOP Project</title>
<style type="text/css">
.btn {
background-color: green;
color: white;
font-size: 20px;
padding: 10px;
border: solid 2px black;
margin: 20px 20px;
}
.modal {
/*musimy schowac element, ktry domyslnie bedzie zajmowal cala storne, rozpoczynal sie w gornym rogu bez wzgledu na to co jest ponad nim, byl na wierzchu, bez mozliwosci przeniesienia i ewentualnie mozna przez niego scrollowac*/
display: none;
background-color: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: 1;
position: fixed;
overflow: auto;
}
.modal-content{
background-color: #4cff4c;
margin: 15% auto;
padding: 20px;
border: solid 1px black;
width: 80%;
box-shadow: 10px 10px black;
}
.close {
float: right;
font-size: 28px;
font-weight: bold;
color: black;
cursor: pointer;
}
.close:hover,
.close:focus{
color: red;
text-decoration: none;
cursor: pointer;
}
</style>
</head>
<body>
<h1>OOP Modal</h1>
<div>
<button class="btn">Click Me to invoke Modal</button>
</div>
<div class="modal">
<div class="modal-content">
<span class="close">×</span>
<p class="modal-text">This is modal</p>
</div>
</div>
<script type="text/javascript">
class Modal {
constructor(text = 'default text'){
this.modal = document.querySelector(".modal");
this.text = text;
}
open() {
this.modal.style.display = "block";
}
exit() {
this.modal.style.display = "none";
}
changeContent() {
if (this.text !== undefined){
this.modal.querySelector(".modal-text").innerText = this.text;
}
}
}
const openBtn = document.querySelector(".btn");
const closeBtn = document.querySelector(".close");
const objectModal = new Modal("zmieniony tekst");
openBtn.addEventListener("click", function(event){
objectModal.open();
});
closeBtn.addEventListener('click', function(event){
objectModal.exit();
});
</script>
</body>
</html>