{"flag":true,"single":true,"pageTitle":"ShowAlert in bootsrap 5 uisng javascript","post":{"id":309,"user_id":"1","slug":"showalert-in-bootsrap-5-uisng-javascript-x4fu","title":"ShowAlert in bootsrap 5 uisng javascript","body":"<p>&nbsp;<\/p>\r\n<pre class=\"language-markup\"><code>&lt;script&gt;\r\nfunction showAlert(text, type, delay, autohide, animation) {\r\n    \/\/ defaults\r\n    if (!text) text = \"danger\";\r\n    if (!type) type = \"danger\";\r\n    if (!delay) delay = 2000;\r\n    if (autohide === undefined || autohide === \"\") autohide = true;\r\n    if (animation === undefined || animation === \"\") animation = true;\r\n\r\n    \/\/ create container if not exists\r\n    let container = document.getElementById(\"dynamic-toast-container\");\r\n    if (!container) {\r\n        container = document.createElement(\"div\");\r\n        container.id = \"dynamic-toast-container\";\r\n        container.className = \"toast-container position-fixed bottom-0 end-0 p-3\";\r\n        document.body.appendChild(container);\r\n    }\r\n\r\n    \/\/ toast element\r\n    const toastEl = document.createElement(\"div\");\r\n    toastEl.className = `toast align-items-center text-white border-0 ${animation ? \"\" : \"fade\"} bg-${type}`;\r\n    toastEl.role = \"alert\";\r\n    toastEl.ariaLive = \"assertive\";\r\n    toastEl.ariaAtomic = \"true\";\r\n\r\n    toastEl.innerHTML = `\r\n        &lt;div class=\"d-flex\"&gt;\r\n            &lt;div class=\"toast-body\"&gt;${text}&lt;\/div&gt;\r\n            &lt;button type=\"button\" class=\"btn-close btn-close-white me-2 m-auto\" \r\n                    data-bs-dismiss=\"toast\" aria-label=\"Close\"&gt;&lt;\/button&gt;\r\n        &lt;\/div&gt;\r\n    `;\r\n\r\n    container.appendChild(toastEl);\r\n\r\n    const toast = new bootstrap.Toast(toastEl, { delay, autohide, animation });\r\n    toast.show();\r\n\r\n    \/\/ remove after hidden\r\n    toastEl.addEventListener(\"hidden.bs.toast\", () =&gt; toastEl.remove());\r\n}\r\n&lt;\/script&gt;<\/code><\/pre>\r\n<p>Usage:<\/p>\r\n<pre class=\"language-markup\"><code>showToast(text, type = \"danger\", delay = 2000, autohide = true, animation = true)\r\n\r\n\r\nshowAlert(\"Something went wrong\");             \/\/ default: danger, 2000ms\r\nshowAlert(\"Task saved\", \"success\");            \/\/ green success\r\nshowAlert(\"Longer info\", \"info\", 5000);        \/\/ info for 5s\r\nshowAlert(\"Custom no hide\", \"\", 3000, false);  \/\/ danger, no autohide<\/code><\/pre>","category_id":"6","is_private":"0","created_at":"2025-08-28T03:59:36.000000Z","updated_at":"2025-08-28T05:24:57.000000Z","category":{"id":6,"user_id":"1","name":"Bootstrap","slug":"bootstrap-lyjs","parent_id":null,"created_at":"2023-03-16T22:42:39.000000Z","updated_at":"2023-03-16T22:42:39.000000Z"},"user":{"id":1,"name":"R GONDAL","email":"rizikmw@gmail.com","email_verified_at":null,"two_factor_confirmed_at":null,"current_team_id":"1","profile_photo_path":null,"created_at":"2023-03-12T10:49:33.000000Z","updated_at":"2025-01-10T12:59:00.000000Z","profile_photo_url":"https:\/\/ui-avatars.com\/api\/?name=R+G&color=7F9CF5&background=EBF4FF"}},"pageDesc":"&nbsp; &lt;script&gt; function showAlert(text, type, delay, autohide, animation) {     \/\/ defaults     if (!text) text = \"danger\";     if (! - ShowAlert in bootsrap 5 uisng javascript (Updated: August 28, 2025) - Read more about ShowAlert in bootsrap 5 uisng javascript at my programming site [SITE]","categories":[]}