[oneal.michaels]

So, first off we will be creating a message box with a title, a body and optionally a close button with a callback,
so first we will create the stylesheet:

div.nContainer { // to hold the elements
    text-align:center;
    display: block;
    padding:0px;
    position:absolute;
    left:50%;
    margin-left:-150px;
    top:175px;
    width:300px;
    background-color:#FFF;
    z-index:200;
}

div.nTitle{ // the title div
    padding: 2px;
    width: 100%;
    text-align: left;
    background-color: #CCC;
    font-size: 21px;
    font-style: oblique;
    border-style: solid;
    border-width: medium medium thin medium;
}

div.nBody { // the body div
    padding: 5px 2px 5px 2px;
    width:100%;
    text-align: center;
    background-color: #FFF;
    font-size: 12px;
    border-style: solid;
    border-width: thin medium medium medium;
}

div.nDismiss { // for the optional dismiss button
    float: right;
    height: 100%;
    background-color: #FF0000;
    font-style: normal;
    font-size: 12px;
}

div.fade { // to fade the background
    display: block;
    position:absolute;
    left:0px;
    top:0px;
    width:100%;
    height:100%;
    background-color:#000;
    opacity: 0.5;
    filter:alpha(opacity=40);
    z-index: 99;
}

Next we will create a function that will create the elements and display them

function createNotification(title, body, canDismiss, callback)
{
    //create the container
    var nContainer = document.createElement("div");
    nContainer.setAttribute("id", "note"+title);
    nContainer.setAttribute("class","nContainer");
    nContainer.className = "nContainer";
    
    //create the title
    var nTitle = document.createElement("div");
    nTitle.setAttribute("class", "nTitle");
    nTitle.className = "nTitle";
    nTitle.innerHTML = title;
    
    //if canDismiss is true then add controls
    if (canDismiss)
    {
        var nDismiss = document.createElement("div");
        nDismiss.setAttribute("class", "nDismiss");
        nDismiss.className = "nDismiss";
        nDismiss.innerHTML = "[close]";
        nDismiss.onclick = function(){destroyNotification(title);callback();};
        nTitle.appendChild(nDismiss);

    }
    
    //append the title to the container
    nContainer.appendChild(nTitle);
    
    //create the body and append to container
    var nBody = document.createElement("div");
    nBody.setAttribute("class", "nBody");
    nBody.className = "nBody";
    nBody.innerHTML = body;
    nContainer.appendChild(nBody);
    
    //show notification
    document.body.appendChild(nContainer);
    
    //fade background
    fadeIt(title);
}

and then also a function to allow for the notification to be removed

function destroyNotification(title)
{
    //get the specified notification
    var note = document.getElementById("note"+title);
    
    //remove the notification
    document.body.removeChild(note);
    
    //unfade the background
    unfadeIt(title)
}

and finally the functions that will fade and unfade the background (which could be replaced with jquery but then again if you are using jquery then there is probably a jquery way to do what is in the tutorial)

function fadeIt(title)
{
    //create a partially opaque div and append it to the document
    var Fade = document.createElement("div");
    Fade.setAttribute("id", "fade"+title);
    Fade.setAttribute("class","fade");
    Fade.className = "fade";
    document.body.appendChild(Fade);
}

function unfadeIt(title)
{
    //get the specified fade element
    var Fade = document.getElementById("fade"+title);
    
    //remove the specified fade element
    document.body.removeChild(Fade);
}

note that these two fading methods are reusable therefore you can use these separate from the notification functions

now that we have our functions we can test them out like so

showNotification("The Title", "Some sort of message for our body", true, function(){alert("A Callback");});

of you have any problems using these functions then feel free to ask questions

here are the css and js files
css:  notification.css (1K)
Number of downloads: 289
js:  notification.js.txt (2.06K)
Number of downloads: 263