Skip to main content

A JavaScript Alert as I want

There are alerts and confirms on JS as you all know. But its look and feel is same old style. I was curious whether we can change it. Of cause we are normally using a div tag and apply some styles to the background to gray out. Then we can use it as a function and call it whenever we need an alert. Isn’t there a better way to do that? I mean much easier way. So what I have tried to do was override the alert functionality on JS and give a customized method to do the job. So then what happens is we don’t need to change the code on each and every place where it used alert(“this is message”);.

I have found the way to this on http://slayeroffice.com/code/custom_alert/

This place can be changed so I have pasted the JS code also in here.

// constants to define the title of the alert and button text.
var ALERT_TITLE = "Oops!";
var ALERT_BUTTON_TEXT = "Ok";

// 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 div as a child of the BODY element
 mObj = d.getElementsByTagName("body")[0].appendChild(d.createElement("div"));
 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.documentElement.scrollHeight + "px";

 // create the DIV that will be the alert 
 alertObj = mObj.appendChild(d.createElement("div"));
 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.documentElement.scrollTop + "px";
 // center the alert box
 alertObj.style.left = (d.documentElement.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("a"));
 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"));
}


You just have to include this JS code in a shared place over the web site as for example on a master page. And then all the alerts will be modified as shown when you clicked Test the alert button. But there is another trick. The site does not mentioned about the styles used on this alert. So I have grabbed them also by using a Firefox add-on called firebug. So you may need those CSS class too or you can modify them as you want the alerts.

element.style  {
     display:block;
     left:559.5px;
}
#modalContainer > #alertBox {
     position:fixed;
}
#alertBox {
     background-color:#F2F5F6;
     background-image:url("alert.png");
     background-position:20px 30px;
     background-repeat:no-repeat;
     border:2px solid #000000;
     margin-top:50px;
     min-height:100px;
     position:relative;
     width:300px;
}
element.style  {
     height:1556px;
}
#modalContainer {
     background-color:transparent;
     background-image:url("tp.png");
     height:100%;
     left:0;
     position:absolute;
     top:0;
     width:100%;
     z-index:10000;
}
#alertBox h1 {
     background-color:#78919B;
     border-bottom:1px solid #000000;
     color:#FFFFFF;
     font:bold 0.9em verdana,arial;
     margin:0;
     padding:2px 0 2px 5px;
}
h1, h2 {
     border-bottom:1px solid #000000;
     font:bold 1.5em verdana;
     margin:0;
     padding:4px;
}
#alertBox p {
     font:0.7em verdana,arial;
     height:50px;
     margin-left:55px;
     padding-left:5px;
}
#alertBox #closeBtn {
     background-color:#78919B;
     border:2px solid #000000;
     color:#FFFFFF;
     display:block;
     font:0.7em verdana,arial;
     margin:5px auto;
     padding:3px;
     position:relative;
     text-align:center;
     text-decoration:none;
     text-transform:uppercase;
     width:70px;
}

Comments

Post a Comment

Popular posts from this blog

Google API v3 with PHP using Blogger service

It was really hard for me to understand how the Google APIs are working at the first point and took few days for me to figure out. But after a successful working prototype it seems very easy. And also when I am searching for a simple example I was unable to find a good one that I can understand. So let me list down step by step what I have done with URLs and as simple as I can. Create a Google app location -  https://code.google.com/apis/console Switch on the "Blogger API v3" Get the latest APIs client library for PHP location -  https://code.google.com/p/google-api-php-client/downloads/list Upload the files to your host location on on localhost Extract the files to folder  named "GoogleClientApi" Create your php file outside of the folder  Copy paste following code into the file and do the changes as needed  By changing the scope and the service object you can access all the services that is given by Google APIs through the PHP API library se

My two cents on new year resolution

What is the plan for the new year ? - need to think on what are we trying achieve during next year 2018 - basically the life goals - may be personal or professional - and also it should be realistic (not something like going to Mars ;)) Why we need a plan for the new year ? - basically a goal without a plan is a DREAM - And also should be able to measure (what you cannot measure, you cannot manage) How to prepare a new Year resolution/plan ? - Leave some buffer time - Make changes during the year (life is changing/evolving) - Plan is only for you (do not share it) - When a milestone is achieved, celebrate - Try to stick to the plan - otherwise no point of planing

Assets and Liabilities as Rich Dad, Poor Dad explains

I was reading "The rich dad poor dad by Robert Kiyosaki" here is a one point that he mentions on that. Basically Asset as he says is little bit different than on books. If something puts money in your pocket it is a asset. And Liabilities are the ones that takes money out of your pocket. OK for example a house or a car may seems like an Asset but it takes money out of you pocket to maintain them. But if you rent them or make them to make money at the end of the day you can convert it to a asset. Basically that what rich people do. They buy assets. Middle class buy liabilities (thinking those are assets) and stuff (a lot of them that not used or that not needed). Lower class buy to consume (basic needs like foods).