├── README.md
├── assets
└── js
│ └── app.js
└── index.html
/README.md:
--------------------------------------------------------------------------------
1 | ## Custom Alert Popup Box using JavaScript
2 |
3 | ---
4 |
5 | ### Using Tools
6 |
7 | - HTML:5
8 | - Tailwind CSS
9 | - JavaScript
10 |
11 | ### Live Website Link
12 |
13 | Click
14 |
--------------------------------------------------------------------------------
/assets/js/app.js:
--------------------------------------------------------------------------------
1 | const popup = document.getElementById("popup");
2 | const clickBtn = document.getElementById("clickBtn");
3 | const confirmationDiv = document.getElementById("confirmationDiv");
4 |
5 | // show popup box by click
6 | let result = false;
7 | const openPopup = () => {
8 | if (!result) {
9 | popup.classList.remove("hidden");
10 | result = true;
11 | } else {
12 | popup.classList.add("hidden");
13 | result = false;
14 | }
15 | };
16 |
17 | //cancel popup box by click
18 | const cancelPopup = () => {
19 | popup.classList.add("hidden");
20 | result = false;
21 | };
22 |
23 | // delete confirmation box
24 | const deleteConfirmation = () => {
25 | confirmationDiv.classList.remove("hidden");
26 | };
27 |
28 | // cancel confirmation box
29 | const cancelConfirmation = () => {
30 | confirmationDiv.classList.add("hidden");
31 | };
32 |
33 | // items deleted button
34 | const deleted = () => {
35 | confirmationDiv.classList.add("hidden");
36 | popup.classList.add("hidden");
37 | clickBtn.innerHTML = "Deleted Successfully";
38 | clickBtn.disabled = true;
39 | setTimeout(() => {
40 | clickBtn.disabled = false;
41 | clickBtn.innerHTML = "Click Me";
42 | result = false;
43 | }, 1000);
44 | };
45 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 | Custom alert popup box
9 |
10 |
11 |
12 |
15 |
22 |
23 |
24 |
64 |
65 |
66 |
70 |
73 |
74 |
75 |
Atom
76 |
103 |
104 |
105 | Your Account Deleted Successfully.
106 |
107 |
108 |
114 |
115 |
116 |
117 |
118 |
119 |
120 |
121 |
122 |
--------------------------------------------------------------------------------