Skip to content

Commit f4004f1

Browse files
Coding-NonnyCoding-Nonny
committed
alert-notify v1.1.1
1 parent 122eb76 commit f4004f1

File tree

2 files changed

+60
-20
lines changed

2 files changed

+60
-20
lines changed

‎src/nonnyAlert.js‎

Lines changed: 14 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -60,59 +60,59 @@ class AlertNotify {
6060
case "success":
6161
document.body.appendChild(this.modalBox);
6262
this.modalBox.innerHTML = `
63-
<div class="modal-div">
64-
<span style="background:#23c55e;color:#000">&check;</span>
63+
<div class="nonny-modal-div nm-success">
64+
<span>&check;</span>
6565
<h2>Success!</h2>
6666
<p>
6767
${msg}
6868
</p>
69-
<button class="close-nonny-modal" style="background:#23c55e;color:#000">Okay!</button>
69+
<button class="close-nonny-modal">Okay!</button>
7070
</div>`;
7171
this.showModal();
7272
break;
7373
case "warning":
7474
document.body.appendChild(this.modalBox);
7575
this.modalBox.innerHTML = `
76-
<div class="modal-div">
77-
<span style="background:#feb601;color:#000">&#x26A0;</span>
76+
<div class="nonny-modal-div nm-warning">
77+
<span>&#x26A0;</span>
7878
<h2>Warning!</h2>
7979
<p>
8080
${msg}
8181
</p>
82-
<button class="close-nonny-modal" style="background:#feb601;color:#000">Okay!</button>
82+
<button class="close-nonny-modal">Okay!</button>
8383
</div>`;
8484
this.showModal();
8585
break;
8686
case "info":
8787
document.body.appendChild(this.modalBox);
8888
this.modalBox.innerHTML = `
89-
<div class="modal-div">
90-
<span style="background:hsl(241, 93%, 29%);color:#fff;">&#9432;</span>
89+
<div class="nonny-modal-div nm-info">
90+
<span>&#9432;</span>
9191
<h2>Info!</h2>
9292
<p>
9393
${msg}
9494
</p>
95-
<button class="close-nonny-modal" style="background:hsl(241, 93%, 29%);color:#fff;">Okay!</button>
95+
<button class="close-nonny-modal">Okay!</button>
9696
</div>`;
9797
this.showModal();
9898
break;
9999
case "danger":
100100
document.body.appendChild(this.modalBox);
101101
this.modalBox.innerHTML = `
102-
<div class="modal-div">
103-
<span style="background:#eb5f51;color:#000;">&times;</span>
102+
<div class="nonny-modal-div nm-danger">
103+
<span>&times;</span>
104104
<h2>Danger!</h2>
105105
<p>
106106
${msg}
107107
</p>
108-
<button class="close-nonny-modal" style="background:#eb5f51;color:#000;">Okay!</button>
108+
<button class="close-nonny-modal">Okay!</button>
109109
</div>`;
110110
this.showModal();
111111
break;
112112
default:
113113
document.body.appendChild(this.modalBox);
114114
this.modalBox.innerHTML = `
115-
<div class="modal-div">
115+
<div class="nonny-modal-div nm-default">
116116
<span style="background:#24282f;color#fff;">&#63;</span>
117117
<h2>Default!</h2>
118118
<p>
@@ -271,7 +271,7 @@ class AlertNotify {
271271
async showModal() {
272272
await new Promise((resolve) => setTimeout(resolve, 500));
273273
document.querySelector("#nonny-modal-box").style = "margin-top:0";
274-
document.querySelector("#nonny-modal-box .modal-div").style =
274+
document.querySelector("#nonny-modal-box .nonny-modal-div").style =
275275
"margin-top:0;transform:scale(1)";
276276
}
277277

‎style/alert-box.css‎

Lines changed: 46 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
width: 0;
4141
display: none;
4242
}
43-
#nonny-modal-box .modal-div {
43+
#nonny-modal-box .nonny-modal-div {
4444
position: relative;
4545
max-width: 400px;
4646
width: 100%;
@@ -57,7 +57,7 @@
5757
transform: scale(0);
5858
transition: all 1s;
5959
}
60-
#nonny-modal-box .modal-div span {
60+
#nonny-modal-box .nonny-modal-div span {
6161
position: absolute;
6262
width: 80px;
6363
height: 80px;
@@ -71,19 +71,39 @@
7171
font-size: 45px;
7272
box-shadow: 15px 15px 20px rgba(0, 0, 0, 0.1);
7373
}
74-
#nonny-modal-box .modal-div p {
74+
#nonny-modal-box .nonny-modal-div.nm-success span {
75+
background: #23c55e;
76+
color: #000;
77+
}
78+
#nonny-modal-box .nonny-modal-div.nm-warning span {
79+
background: #feb601;
80+
color: #000;
81+
}
82+
#nonny-modal-box .nonny-modal-div.nm-info span {
83+
background: #4f5bd5;
84+
color: #fff;
85+
}
86+
#nonny-modal-box .nonny-modal-div.nm-danger span {
87+
background: #eb5f51;
88+
color: #000;
89+
}
90+
#nonny-modal-box .nonny-modal-div.nm-default span {
91+
background: #24282f;
92+
color: #fff;
93+
}
94+
#nonny-modal-box .nonny-modal-div p {
7595
width: 100%;
7696
font-weight: 500;
7797
font-size: 18px;
7898
margin-top: 35px;
7999
word-wrap: break-word;
80100
}
81-
#nonny-modal-box .modal-div h2 {
101+
#nonny-modal-box .nonny-modal-div h2 {
82102
font-weight: 700;
83103
font-size: 30px;
84104
margin-top: 50px;
85105
}
86-
#nonny-modal-box .modal-div button {
106+
#nonny-modal-box .nonny-modal-div button {
87107
width: 80%;
88108
background: rgb(5, 215, 5);
89109
color: #edf1f4;
@@ -97,7 +117,27 @@
97117
cursor: pointer;
98118
transition: transform 1s;
99119
}
100-
#nonny-modal-box .modal-div button:hover {
120+
#nonny-modal-box .nonny-modal-div.nm-success button {
121+
background: #23c55e;
122+
color: #000;
123+
}
124+
#nonny-modal-box .nonny-modal-div.nm-warning button {
125+
background: #feb601;
126+
color: #000;
127+
}
128+
#nonny-modal-box .nonny-modal-div.nm-info button {
129+
background: #4f5bd5;
130+
color: #fff;
131+
}
132+
#nonny-modal-box .nonny-modal-div.nm-danger button {
133+
background: #eb5f51;
134+
color: #000;
135+
}
136+
#nonny-modal-box .nonny-modal-div.nm-default button {
137+
background: #24282f;
138+
color: #fff;
139+
}
140+
#nonny-modal-box .nonny-modal-div button:hover {
101141
transform: scale(1.1);
102142
}
103143
@media screen and (max-width: 500px) {

0 commit comments

Comments
 (0)