Javascript Code Custom Alert, Self Closing, non-Modal

[1] Non-modal (does not lock screen until dismissed). [2] Visually pleasing and very attention getting. [3] Accepts html code and your own custom css for the [msg]. Css can be inline or internal (between style tags). [4] Is fluid/mobile friendly. [5] Can be closed by clicking anywhere on it. [6] Can be set to self close after [secondsSelfClose] number of seconds.

/* ----------------------------------------------------- CUSTOM JAVASCRIPT ALERT BOX THAT IS ... [1] Non-modal (does not lock screen until dismissed). [2] Visually pleasing and very attention getting. [3] Accepts html code and your own custom css for the [msg]. Css must be inline ie <p style="color:red;"> and not <style>r{color:red}</style> [4] Is fluid/mobile friendly. [5] Can be closed by clicking anywhere on it. [6] Can be set to self close after [secondsSelfClose] number of seconds. PARAMETERS [msg] the alert box message text. Accepts html code as well as css. [title] the text that appears on the titlebar at top of alert. [icon] the first thing before the titlebar text can really be anything but is intended for icon (xahlee.info/comp/unicode_index.html) [secondsSelfClose] set this to anything but 0 (must be a number) and the custom alert will self close in that many seconds. ----------------------------------------------------- */ alertX =(msg, title = "", icon = "", secondsSelfClose = 0)=>{ /* save element with current focus so we can put back there when alertX closes */ let activeElem = document.activeElement, objTimer = null; /* if already an instance of alertX remove it first */ let prevAlertX = document.querySelector("#alertX"); if(prevAlertX) { prevAlertX.remove(); } let cssDiv=` background-color:#ff0; border:2px solid #aaa; box-shadow:-5px 38px 50px -27px rgba(0,0,0,0.30); cursor:pointer; left:50%; overflow:hidden; padding:0 0 10px 0; position:fixed; text-align:left; top:1%; transform:translate(-50%, 0); width:450px; z-index:2147483647; `; // change width of alert to accomodate mobile if(window.innerWidth < 450) { cssDiv = cssDiv.replace("width:450px;", "width:95%;"); } cssTitle = ` background-color:blue; background-image:linear-gradient(#1a8db9, #0c6da4); background-repeat:no-repeat; color:white; font:bold small-caps 16px Arial, sans-serif; height:1.45em; left:0; line-height:1.4em; margin:1px; overflow:hidden; padding:1px 3px; right:1px; text-align:left; top:0; `; cssMsg = ` background-color:transparent; height:auto; left:1%; font:17px Arial, sans-serif; min-height:50px; max-height:220px; overflow-x:hidden; overflow-y:auto; padding:5px; position:absolute; right:0; text-align:left; top:28px; `; cssClose = ` background-color:white; border:1px solid #aaa; color:red; display:none; height:1.2em; line-height:1.2em; padding: 1px 3px; position:absolute; white-space:nowrap; `; const div = document.createElement("div"), divtitle = document.createElement("div"), divMsg = document.createElement("div"), divClose = document.createElement("div"); // apply the above css to the elements div.style.cssText = cssDiv; div.id = "alertX"; divtitle.style.cssText = cssTitle; divMsg.style.cssText = cssMsg; divClose.style.cssText = cssClose; if(title.trim().length == 0) { title = window.location.hostname + " says:"; } divtitle.innerHTML = icon + " " + title; // the alertX text message replacing js line breaks with html line breaks divMsg.innerHTML = msg.replace(/(?:\r\n|\r|\n)/g, "<br>"); // tooltip that follows mouse when user moves mouse // over alertX telling user to click anywhere to close divClose.innerHTML = "Click anywhere to close."; // append each of the elements to put them together document.body.appendChild(div); div.appendChild(divtitle); div.appendChild(divMsg); div.appendChild(divClose); // set the enter custom alerts height div.style.height = divMsg.clientHeight + divtitle.clientHeight + "px"; // change width of alert to accomodate mobile window.onresize =()=> { div.style.width = (window.innerWidth < 450) ? "95%" : "450px" ; } div.onmouseenter =()=> { divClose.style.display = "block"; } div.onmouseleave =()=> { divClose.style.display = "none"; } div.onmousemove =(e)=> { // get mouse x and y let rect = div.getBoundingClientRect(), x = parseInt((e.clientX - rect.left) - (divClose.clientWidth * .5)), y = parseInt(e.clientY - rect.top); divClose.style.left = (x + 10) + "px"; divClose.style.top = (y + 20) + "px"; } // click anywhere on alert to close manually div.onclick =()=> { // dont close this message box if a link has been clicked let el = document.elementFromPoint(event.clientX, event.clientY); if(el.tagName.toLowerCase() !== "a") { if(secondsSelfClose > 0) { // clear the self closing timer to prevent weird focus behavior clearTimeout(objTimer); } div.remove(); } // put focus back where it was before alertX if(activeElem) { activeElem.focus(); } } if(secondsSelfClose > 0) { objTimer = setTimeout(function(){div.remove();if(activeElem){activeElem.focus();}}, (secondsSelfClose * 1000)); } }

Example usage of custom alert box for Javascript

alertX("Be sure to check out our other cool Javascript custom code at https://vb6code.com.", "thanks for visiting", "👍"); // if you want the message box to self close after 5 seconds ... alertX("Be sure to check out our other cool Javascript custom code at https://vb6code.com.", "thanks for visiting", "👍", 5); // with custom css alertX("<p style='color:red;font:bold 15px Arial, sans-serif'>Be sure to check out our other cool Javascript custom code at https://vb6code.com.</p>", "thanks for visiting", "👍", 5);

Try custom alert box Javascript

Custom Javascript Alert