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 applocation - https://code.google.com/apis/consoleSwitch on the "Blogger API v3"Get the latest APIs client library for PHPlocation - https://code.google.com/p/google-api-php-client/downloads/listUpload the files to your host location on on localhostExtract 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 set given.
If there is anything …

How to get indexed by Google & Yahoo

I have seen a lot of ads and services online that provide the facility to get higher page ranks on search engines. But when I asked about those services on Google their respond was not much positive because they said it can decrease you page rank (because those services cannot be trusted always). It is happening because the page rank is depending on page visitors (as Google say). So the better way is to let the Google to index your site by sending them the address of your website. http://www.google.com/webmasters/ : here you can improve the traffic with the webmaster tools and you can send your website contents also. It is a legal, simple and direct hit.
You can send your web site address (even the blog) to Yahoo: https://siteexplorer.search.yahoo.com also. It helps them to index your pages on their search engines.


It is better to come up with the content and services which are really useful for the visitors and the traffic will be increased regularly. I have gone through a lot of expe…

How to Install ColdFusion 8 on Linux?

It was real pain for me to install ColdFusion on my Linux box with Apache. Anyway we have installed it and I thought to share it because this may help you also to install ColdFusion on a Linux box.
First of all open a shell and then continue on this.

Grant Execute permission to the Coldfusion‐8‐lin.bin binary file
chmod +x Coldfusion‐8‐lin.bin

Execute Coldfusion‐8‐lin.bin
./Coldfusion‐8‐lin.bin

Enter the Locale
1 (English)

Hit Enter 28 times to continue the agreement

Enter "Y" to accept the agreement

Enter the version to install
3 (Developer Edition)

Enter the next task to perform
1 (Server Configuration)

Enter whether you have an existing server configuration
2 (No existing server configuration)

Enter the next task to perform
5 (continue installation)

Enter the installation path
Hit enter to accept the default path

Hit Enter 30 times to continue the agreement

Enter "Y" to accept the agreement

Enter the serial number
Hit Enter for no serial number

Enter whether you h…