├── images ├── Blogo.png ├── error.png ├── info.png ├── usage.png ├── confirm.png ├── success.png ├── warning.png └── corner-label.png ├── customModal_v1.0.zip ├── v2 ├── customModal_v2.0.zip ├── customModal_V2 │ └── resources │ │ ├── images │ │ ├── alert.gif │ │ ├── error.gif │ │ ├── info.gif │ │ ├── success.gif │ │ └── warning.gif │ │ └── js │ │ └── customModal@2.0.min.js └── index.html ├── customModal ├── resources │ ├── images │ │ ├── error.gif │ │ ├── info.gif │ │ ├── success.gif │ │ └── warning.gif │ └── js │ │ └── customModal.min.js └── ReadMe.md ├── css └── style.css ├── LICENSE ├── README.md └── index.html /images/Blogo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/Blogo.png -------------------------------------------------------------------------------- /images/error.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/error.png -------------------------------------------------------------------------------- /images/info.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/info.png -------------------------------------------------------------------------------- /images/usage.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/usage.png -------------------------------------------------------------------------------- /images/confirm.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/confirm.png -------------------------------------------------------------------------------- /images/success.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/success.png -------------------------------------------------------------------------------- /images/warning.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/warning.png -------------------------------------------------------------------------------- /customModal_v1.0.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/customModal_v1.0.zip -------------------------------------------------------------------------------- /images/corner-label.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/images/corner-label.png -------------------------------------------------------------------------------- /v2/customModal_v2.0.zip: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/v2/customModal_v2.0.zip -------------------------------------------------------------------------------- /customModal/resources/images/error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/customModal/resources/images/error.gif -------------------------------------------------------------------------------- /customModal/resources/images/info.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/customModal/resources/images/info.gif -------------------------------------------------------------------------------- /customModal/resources/images/success.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/customModal/resources/images/success.gif -------------------------------------------------------------------------------- /customModal/resources/images/warning.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/customModal/resources/images/warning.gif -------------------------------------------------------------------------------- /v2/customModal_V2/resources/images/alert.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/v2/customModal_V2/resources/images/alert.gif -------------------------------------------------------------------------------- /v2/customModal_V2/resources/images/error.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/v2/customModal_V2/resources/images/error.gif -------------------------------------------------------------------------------- /v2/customModal_V2/resources/images/info.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/v2/customModal_V2/resources/images/info.gif -------------------------------------------------------------------------------- /v2/customModal_V2/resources/images/success.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/v2/customModal_V2/resources/images/success.gif -------------------------------------------------------------------------------- /v2/customModal_V2/resources/images/warning.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/eamalindu/Custom-Modal-Alerts/HEAD/v2/customModal_V2/resources/images/warning.gif -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | @import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); 2 | *{ 3 | padding: 0; 4 | margin: 0; 5 | font-family: 'Poppins', sans-serif; 6 | } 7 | body{ 8 | background: #fefefe; 9 | } 10 | -------------------------------------------------------------------------------- /customModal/ReadMe.md: -------------------------------------------------------------------------------- 1 | Thank You 2 | --- 3 | Thank you for downloading **Custom Modal Alert** v1.0 4 | 5 | ⚠️ Important ⚠️ 6 | --- 7 | Unzip the **customModal_v1.0.zip** into your root folder 8 | 9 | ``` 10 | /root 11 | ├── assets📁 12 | │ ├── css📁 13 | │ │ └── style.css📝 14 | │ └── js📁 15 | │ └── script.js📝 16 | ├── customModal_v1.0 (unzipped folder) 17 | └── index.html📝 18 | ``` 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2023 E A Malindu Prabodhitha 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /customModal/resources/js/customModal.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Malindu Prbodhitha 3 | * @version 1.0 4 | * Shows a custom modal dialog. 5 | * @param {string} t The message to display in the modal dialog. 6 | * @param {string} e The type of modal dialog to display, one of: `warning`, `error`, `success`, or `info`. 7 | */ 8 | function showCustomModal(t,e){const s=document.createElement("div");s.classList.add("modal","fade"),s.setAttribute("id","my-modal"),s.setAttribute("tabindex","-1"),s.setAttribute("aria-labelledby","my-modal-title"),s.setAttribute("aria-hidden","true"),s.setAttribute("data-bs-backdrop","static");const d=document.createElement("div");d.classList.add("modal-dialog","modal-dialog-centered");const a=document.createElement("div");a.classList.add("modal-content");const i=document.createElement("div");i.classList.add("modal-header","bg-custom-white");const o=document.createElement("h5");o.classList.add("modal-title"),o.id="my-modal-title",o.textContent="Warning !",o.style.textTransform="uppercase",o.style.fontSize="medium",o.style.fontWeight="bold",o.style.fontFamily="Arial, serif",i.appendChild(o);const n=document.createElement("button");n.type="button",n.classList.add("btn","btn-secondary","text-white","mx-auto","d-block"),n.setAttribute("data-bs-dismiss","modal"),n.setAttribute("aria-label","Close"),n.innerHTML="Ok",i.appendChild(n);const c=document.createElement("div");c.classList.add("modal-body");const l=document.createElement("img");l.classList.add("d-flex","mx-auto"),"warning"===e?l.src="customModal/resources/images/warning.gif":"error"===e?(l.src="customModal/resources/images/error.gif",l.classList.add("ps-2")):l.src="success"===e?"customModal/resources/images/success.gif":"customModal/resources/images/info.gif",l.style.width="150px",c.appendChild(l);const m=document.createElement("h5");m.classList.add("text-center","fs-3","text-capitalize","fw-bold"),m.innerText=e+" !",c.appendChild(m);const r=document.createElement("h5");r.classList.add("text-center","fs-4","text-capitalize","mb-4","mt-3"),r.innerText=t,c.appendChild(r),c.appendChild(n);document.createElement("div").classList.add("modal-footer"),d.appendChild(a),a.appendChild(c),s.appendChild(d),document.body.appendChild(s),new bootstrap.Modal(s).show(),"success"!==e&&"info"!==e||setTimeout((function(){n.click()}),4900)} 9 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # **Version 2.0 (Latest)** 2 | 3 | The Custom Modal Now Support Custom Alerts. 4 | Instead of using native confirm alerts from JS now you can use beautifully animated custom confirm alerts 5 | 6 | DEPENDENCIES 7 | -- 8 | Bootstrap 5.0+ 9 | 10 | USAGE 11 | -- 12 | 13 | ``` 14 | showCustomConfirm(msg,result); 15 | ``` 16 | 17 | DOCUMENTATION 18 | -- 19 | 20 | | Example | Explanation | 21 | |-------------------------------------------------------|-----------------------------------------------------------------------------------------| 22 | | ```msg``` | Insert your message here | 23 | | ```result``` | catch the result of the user confirmation (callback function) | 24 | 25 | 26 | # **Version 1.0** 27 | 28 | CUSTOM MODAL ALERTS FOR BOOTSTRAP 5 29 | -- 30 | Originally created as a side project for BIT Final Project. The Custom Modal Alert can be attached to any webpage element to show modern model with beautiful animated GIFs 31 | 32 | DEPENDENCIES 33 | -- 34 | Bootstrap 5.0+ 35 | 36 | USAGE 37 | -- 38 | 39 | ``` 40 | showCustomModal(msg,variant); 41 | ``` 42 | 43 | DOCUMENTATION 44 | -- 45 | 46 | | Example | Explanation | 47 | |-------------------------------------------------------|-----------------------------------------------------------------------------------------| 48 | | ```msg``` | Insert your message here | 49 | | ```variant``` | Either can be success, error, warning or info | 50 | | ```showCustomModal("Hello","info")``` | This will display info variant of the modal with the text with **Hello** | 51 | | ```showCustomModal("This is an Error!","error")``` | This will display error variant of the modal with the text with **This is an Error** | 52 | | ```showCustomModal("This is a Warning!","warning")``` | This will display warning variant of the modal with the text with **This is a Warning** | 53 | | ```showCustomModal("This is a Success!","success")``` | This will display success variant of the modal with the text with **This is a Success** | -------------------------------------------------------------------------------- /v2/customModal_V2/resources/js/customModal@2.0.min.js: -------------------------------------------------------------------------------- 1 | /** 2 | * @author Malindu Prbodhitha 3 | * @version 2.0 4 | * Shows a custom modal dialog. 5 | * shows a custom confirm alert 6 | * 7 | * showCustomModal(t,e) 8 | * @param {string} t The message to display in the modal dialog. 9 | * @param {string} e The type of modal dialog to display, one of: `warning`, `error`, `success`, or `info`. 10 | * 11 | * showCustomConfirm(t,e) 12 | * @param {string} t The message to display in the confirm alert. 13 | * @param {string} e callback function => for catch user input (yes/no). 14 | */ 15 | function showCustomModal(t,e){let a=document.createElement("div");a.classList.add("modal","fade"),a.setAttribute("id","my-modal"),a.setAttribute("tabindex","-1"),a.setAttribute("aria-labelledby","my-modal-title"),a.setAttribute("aria-hidden","true"),a.setAttribute("data-bs-backdrop","static");let d=document.createElement("div");d.classList.add("modal-dialog","modal-dialog-centered");let s=document.createElement("div");s.classList.add("modal-content");let l=document.createElement("div");l.classList.add("modal-header","bg-custom-white");let i=document.createElement("h5");i.classList.add("modal-title"),i.id="my-modal-title",i.textContent="Warning !",i.style.textTransform="uppercase",i.style.fontSize="medium",i.style.fontWeight="bold",i.style.fontFamily="Arial, serif",l.appendChild(i);let n=document.createElement("button");n.type="button",n.classList.add("btn","btn-secondary","text-white","mx-auto","d-block"),n.setAttribute("data-bs-dismiss","modal"),n.setAttribute("aria-label","Close"),n.innerHTML="Ok",l.appendChild(n);let o=document.createElement("div");o.classList.add("modal-body");let c=document.createElement("img");c.classList.add("d-flex","mx-auto"),"warning"===e?c.src="customModal_v2/resources/images/warning.gif":"error"===e?(c.src="customModal_v2/resources/images/error.gif",c.classList.add("ps-2")):"success"===e?c.src="customModal_v2/resources/images/success.gif":c.src="customModal_v2/resources/images/info.gif",c.style.width="150px",o.appendChild(c);let r=document.createElement("h5");r.classList.add("text-center","fs-3","text-capitalize","fw-bold"),r.innerText=e+" !",o.appendChild(r);let m=document.createElement("h5");m.classList.add("text-center","fs-5","text-capitalize","mb-4","mt-3"),m.innerText=t,o.appendChild(m),o.appendChild(n);let b=document.createElement("div");b.classList.add("modal-footer"),d.appendChild(s),s.appendChild(o),a.appendChild(d),document.body.appendChild(a),new bootstrap.Modal(a).show(),("success"===e||"info"===e)&&setTimeout(function(){n.click()},4900)}function showCustomConfirm(t,e){let a=document.createElement("div");a.classList.add("modal","fade"),a.setAttribute("id","custom-alert"),a.setAttribute("tabindex","-1"),a.setAttribute("aria-labelledby","my-modal-title"),a.setAttribute("aria-hidden","true"),a.setAttribute("data-bs-backdrop","static");let d=document.createElement("div");d.classList.add("modal-dialog","modal-dialog-centered");let s=document.createElement("div");s.classList.add("modal-content");let l=document.createElement("div");l.classList.add("modal-header","bg-custom-white");let i=document.createElement("div");i.classList.add("modal-body");let n=document.createElement("img");n.classList.add("d-flex","mx-auto"),n.src="customModal_V2/resources/images/alert.gif",n.style.width="100px",i.appendChild(n);let o=document.createElement("h5");o.classList.add("text-center","fs-3","text-capitalize","fw-bold","mt-3"),o.innerText="Confirmation Required!",i.appendChild(o);let c=document.createElement("h5");c.classList.add("text-center","fs-5","text-capitalize","mb-4","mt-3"),c.innerHTML=t,i.appendChild(c);let r=document.createElement("button");r.type="button",r.classList.add("btn","btn-success","mx-auto","d-block","float-end"),r.onclick=function(){e(!0)},r.innerText="Yes",r.setAttribute("data-bs-dismiss","modal"),r.setAttribute("aria-label","Close");let m=document.createElement("button");m.type="button",m.classList.add("btn","btn-secondary","mx-auto","d-block","float-start"),m.onclick=function(){e(!1)},m.innerText="No",m.setAttribute("data-bs-dismiss","modal"),m.setAttribute("aria-label","Close"),i.appendChild(r),i.appendChild(m),d.appendChild(s),s.appendChild(i),a.appendChild(d),document.body.appendChild(a),new bootstrap.Modal(a).show()} -------------------------------------------------------------------------------- /v2/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom B5 Alerts | eamalindu.github.io 8 | 9 | 11 | 12 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 |
24 |

Custom Modal Version 2.0

25 |
26 |
27 |

Originally created as a side project for BIT Final Project. 28 | The Custom Modal Now Support Custom Alerts.
Instead of using native confirm alerts from JS now you can use beautifully animated custom confirm alerts

29 |
30 |
31 |
32 |
33 |
34 |
35 | success 36 |
Confirm Modal Alert
37 |
38 |
39 | 43 |
44 |
45 |
46 |
47 |
48 |
49 |
50 |
51 |
Dependencies
52 | bootstrap logo Bootstrap 5.0+ 53 |
54 |
55 |
56 |
57 |
Usage
58 | showCustomConfirm(msg,result); 59 | 60 |
61 |
62 |
63 |
Getting Started
64 |
65 |

To get started, include bootstrap css, bootstrap js and custom Modal files in your webpage

66 |
67 | 68 | <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> 69 |
70 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script> 71 |
72 | <script src="customModal_V2/resources/js/customModal@2.0.min.js" type="text/javascript"></script> 73 |
74 | 75 |
76 |
77 |

Then call showCustomConfirm() to whatever you want to trigger it

78 |
79 | 80 | <script> 81 | showCustomConfirm("Hello",function (result){}); 82 | </script> 83 | 84 |
85 |
86 |
87 |
88 |
Documentation
89 |
90 | 91 | 92 | 93 | 94 | 95 | 96 | 97 | 98 | 99 | 100 | 101 | 102 | 103 | 104 | 105 | 106 | 107 | 108 | 141 | 142 | 143 |
ExampleExplanation
msgInsert your message here
resultcatch the result of the user confirmation (callback function)
109 |
    110 |

  1. showCustomConfirm("Are You sure?", function (result){});

    111 |
      112 |
    • This line calls the showCustomConfirm function, passing two arguments: 113 |
        114 |
      • The first argument is the message to be displayed in the confirmation modal. In this case, it's the string "Are you sure?".
        • 115 |
      • The second argument is a callback function. This function will be executed once the user interacts with the modal, and it takes a single parameter (result). 116 |
        • 117 |
      118 |
      • 119 |
    120 |
    121 |
    2. 122 |

  2. Callback Function:

    123 |
      124 |
    • The callback function checks the value of result, which is the user's choice in the confirmation modal.
      • 125 |
    • If result is true, it means the user clicked "Yes" in the modal, and an alert is shown with the message "User clicked Yes".
      • 126 |
    • If result is false, it means the user clicked "No" or closed the modal without clicking "Yes", and an alert is shown with the 127 | message "User clicked No or closed the modal". 128 |
      • 129 |
    • In this example, it displays an alert message, but you can replace it with your desired logic.
      • 130 |
    131 |
    132 |
    3. 133 |
134 | 135 | 140 |
144 |
145 |
146 |
147 |
148 | Download v2.0 150 |
151 |
152 |
153 |

Made with ❤️ - Malindu Prabodhitha

154 |
155 | 156 | 157 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Custom B5 Modals | eamalindu.github.io 8 | 9 | 11 | 12 | 14 | 15 | 18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | New Version 26 |
27 |
28 |

Custom Modal Alerts for Bootstrap 5

29 |
30 |
31 |

Originally created as a side project for BIT Final Project. 32 | The Custom Modal Alert can be attached to any webpage element to show modern 33 | model with beautiful animated GIFs

34 |
35 |
36 |
37 |
38 |
39 | success 40 |
Success Modal
41 |
42 |
43 | 44 |
45 |
46 |
47 |
48 |
49 |
50 | error 51 |
Error Modal
52 |
53 |
54 | 55 |
56 |
57 |
58 |
59 |
60 |
61 | warning 62 |
Warning Modal
63 |
64 |
65 | 66 |
67 |
68 |
69 |
70 |
71 |
72 | info 73 |
Info Modal
74 |
75 |
76 | 77 |
78 |
79 |
80 |
81 |
82 |
83 |
84 |
85 |
Dependencies
86 | bootstrap logo Bootstrap 5.0+ 87 |
88 |
89 |
90 |
91 |
Usage
92 | showCustomModal(msg,variant); 93 | 94 |
95 |
96 |
97 |
Getting Started
98 |
99 |

To get started, include bootstrap css, bootstrap js and custom Modal files in your webpage

100 |
101 | 102 | <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"> 103 |
104 | <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" type="text/javascript"></script> 105 |
106 | <script src="customModal/resources/js/customModal.min.js" type="text/javascript"></script> 107 |
108 | 109 |
110 |
111 |

Then call showCustomModal() to whatever you want to trigger it

112 |
113 | 114 | <script> 115 | showCustomModal("Hello","info"); 116 | </script> 117 | 118 |
119 |
120 |
121 |
122 |
Documentation
123 |
124 | 125 | 126 | 127 | 128 | 129 | 130 | 131 | 132 | 133 | 134 | 135 | 136 | 137 | 138 | 139 | 140 | 141 | 142 | 145 | 146 | 147 | 148 | 151 | 152 | 153 | 154 | 157 | 158 | 159 | 160 | 163 | 164 | 165 | 168 | 169 | 170 |
ExampleExplanation
msgInsert your message here
variantEither can be success, error, warning or info
showCustomModal("Hello","info")This will display info variant of the modal with the text with Hello 143 | 144 |
showCustomModal("This is an Error!","error")This will display error variant of the modal with the text with This is an Error 149 | 150 |
showCustomModal("This is a Warning!","warning")This will display warning variant of the modal with the text with This is a Warning 155 | 156 |
showCustomModal("This is a Success!","success")This will display success variant of the modal with the text with This is a Success 161 | 162 |
166 | Success and info variant will be automatically closed after 5 seconds 167 |
171 |
172 |
173 |
174 |
175 | Download v1.0 176 |

Version 2.0 Available!

177 |
178 |
179 |
180 |

Made with ❤️ - Malindu Prabodhitha

181 |
182 | 183 | 184 | 185 | 186 | --------------------------------------------------------------------------------