Understanding How JavaScript Alerts Work
Custom Alert Box With Pure JavaScript
This is for anyone who want to create a custom alert to replace the native JS alert that you get when you do,
alert('message');I will try to keep this as simple as possible so everybody will understand. The expected outcome is when you say,
customAlert.alert('message');…it should show up with the message.
Our alert box will consist of 3 parts, head, body and footer.
Head is where our heading will go, body is where the message will go and footer will hold the buttons. In addition to that we will create a transparent black background for the alert as well.
For now use the style sheet that I am providing you (I like the solarized color scheme 😍), after understanding what it does, you may change it as per your preferences.
Let’s head over to the script section and create a function to show this alert.
We will go through this step by step.
What we are doing is, when we want to show the alert, we will create the overlay and the alert with respective head, body and footer, then append it to the <body> element in the document.
When want to remove it, we will hide the respective markup from the document. We can do this easily using JavaScript. Following are the markup responsible for the alert box, the class slit-in-vertical is responsible for entrance animation, taken from http://animista.net/play/entrances/slit-in (they have some cool animations, go there and select one.)
We add this to the document body as follows.
document.body.innerHTML = document.body.innerHTML + '<div id="dialogoverlay"></div><div id="dialogbox" class="slit-in-vertical"><div><div id="dialogboxhead"></div><div id="dialogboxbody"></div><div id="dialogboxfoot"></div></div></div>';With me so far? Great! Moving on.
Next we will select the elements overlay dialogoverlay and alert dialogbox
let dialogoverlay = document.getElementById('dialogoverlay');
let dialogbox = document.getElementById('dialogbox');Get the window height and set the height of the overlay as same as window height.
let winH = window.innerHeight;
dialogoverlay.style.height = winH+"px";Display the overlay and alert box (after 100 pixels from top)
dialogbox.style.top = "100px";dialogoverlay.style.display = "block";
dialogbox.style.display = "block";
Then we will check if there is an alert heading passed on to the function. If so, we will display the heading with an icon taken from FontAwesom. Otherwise we will hide the dialogboxhead element from the alert box.
if(typeof title === 'undefined') { document.getElementById('dialogboxhead').style.display = 'none';} else { document.getElementById('dialogboxhead').innerHTML = '<i class="fa fa-exclamation-circle" aria-hidden="true"></i> '+ title;}
When you say,
customAlert.alert('This is a custom alert with heading.','Heads Up!');…It will show up with a message and if you haven’t specified a title (or heading) there will be no heading.
customAlert.alert('This is a custom alert without heading.')
Once that is resolved what’s left is to show the message and the OK button for the footer.
document.getElementById('dialogboxbody').innerHTML = message;document.getElementById('dialogboxfoot').innerHTML = '<button class="pure-material-button-contained active" onclick="customAlert.ok()">OK</button>';
In the ok function, we will hide the overlay and the alertbox.
this.ok = function(){
document.getElementById('dialogbox').style.display = "none";
document.getElementById('dialogoverlay').style.display = "none";
}Since we hide the dialogboxhead if there’s no title provided, we need to set it to visible, otherwise next time when there is a title provided, it will not show up, that is why there’s this line,
document.getElementById('dialogboxhead').style.display = 'block';…before the if statement.
That’s it. The rest is styling. I tried to use a material theme with solarized color scheme. You may do as you please. Full code can be found here or here,
