Js custom AlertBox (Information prompt box) _ javascript skills

This is a translation. The implementation code of the instance analysis and custom information prompt box is as follows:

Insert the following code into the js file:

The Code is as follows:

// JScript File
// Constants to define the title of the alert and button text.
Var ALERT_TITLE = "Oops! ";
Var ALERT_BUTTON_TEXT = "Close ";
// Over-ride the alert method only if this a newer browser.
// Older browser will see standard alerts
If (document. getElementById ){
Window. alert = function (txt ){
CreateCustomAlert (txt );
}
}
Function createCustomAlert (txt ){
// Shortcut reference to the document object
D = document;
// If the modalContainer object already exists in the DOM, bail out.
If (d. getElementById ("modalContainer") return;
// Create the modalContainer p as a child of the BODY element
MObj = d. getElementsByTagName ("body") [0]. appendChild (d. createElement ("p "));
MObj. id = "modalContainer ";
// Make sure its as tall as it needs to be to overlay all the content on the page
MObj. style. height = document.doc umentElement. scrollHeight + "px ";
// Create the DIV that will be the alert
AlertObj = mObj. appendChild (d. createElement ("p "));
AlertObj. id = "alertBox ";
// MSIE doesnt treat position: fixed correctly, so this compensates for positioning the alert
If (d. all &&! Window. opera) alertObj. style. top = document.doc umentElement. scrollTop + "px ";
// Center the alert box
AlertObj. style. left = (d.doc umentElement. scrollWidth-alertObj. offsetWidth)/2 + "px ";
// Create an H1 element as the title bar
H1 = alertObj. appendChild (d. createElement ("h1 "));
H1.appendChild (d. createTextNode (ALERT_TITLE ));
// Create a paragraph element to contain the txt argument
Msg = alertObj. appendChild (d. createElement ("p "));
Msg. innerHTML = txt;
// Create an anchor element to use as the confirmation button.
Btn = alertObj. appendChild (d. createElement (""));
Btn. id = "closeBtn ";
Btn. appendChild (d. createTextNode (ALERT_BUTTON_TEXT ));
Btn. href = "#";
// Set up the onclick event to remove the alert when the anchor is clicked
Btn. onclick = function () {removeCustomAlert (); return false ;}
// Removes the custom alert from the DOM function removeCustomAlert (){
// Document. getElementsByTagName ("body") [0]. removeChild (document. getElementById ("modalContainer "));
}
// Removes the custom alert from the DOM
Function removeCustomAlert ()
{
Document. getElementsByTagName ("body") [0]. removeChild (document. getElementById ("modalContainer "));
}

Paste the following code into your html head section.

The Code is as follows: