├── 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 | 118 |
119 | 120 | 121 | 122 | --------------------------------------------------------------------------------