Custom JS dialogs

A sort of framework that can be used as an alternative to JS' default crap. Based on jQuery 1.4.2. Uses CSS3.

by mich

HTML

<p>
    Here are some tests for the new fake popup dialog system I'm working on.<br />
    <form action="." onsubmit="return false;">
        <fieldset>
            <input type="button" value="Alert" onclick="LFP(1)" /> <input type="button" value="OkCancel" onclick="LFP(2)" /> <input type="button" value="YesNo" onclick="LFP(4)" /> <input type="button" value="Prompt" onclick="LFP(3)" />
        </fieldset>
    </form>
</p>

CSS

div.pboxwrapper {
    position:fixed;
    top:30%;
    left:50%;
    z-index: 10;
    width: 400px;
    margin-left:-200px;
    display: none;
    background-color: #FFFFFF;
    border: solid 3px #888888;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    font-size: 13px;
    font-family: Arial;
    max-height: 40%;
    overflow: auto;
    text-align: left;    
}
div.pboxtitle {
    background-color: #3333FF;    
    color: #FFFFFF;
    font-weight:bold;
    padding: 5px 10px;
    -moz-border-radius-topleft: 3px;
    -moz-border-radius-topright: 3px;
    -webkit-border-radius-topleft: 3px;
    -webkit-border-radius-topright: 3px;
}
div.pboxcontent {
    padding: 10px;
    border-top: solid 1px #888888;
    font-size: 13px;
    max-height: 150px;
    overflow: auto;
    
}
#promptbox_input
{
    width: 100%;
    border: solid 1px #888888;
    background-color: #FFFFFF;
    -moz-border-radius: 2px;
    -webkit-border-radius: 2px;
    margin: 5px 0px;
    
}
div.pboxbuttons {
    background-color: #EEEEEE;
    text-align: right;
    padding: 5px;
    border-top: solid 1px #DDDDDD;
}

a.nicebutton {
    font-weight:        bold;
    font-size:            13px;
    color:                #000000;
    padding:             1px 3px;
    text-decoration:    none;
    -moz-border-radius: 2px;
    -webkit-border-radius:    2px;
}
a.nicebutton:link, a.nicebutton:active, a.nicebutton:visited {
    border:             solid 1px #AAAAAA;    
    background-color:    #DDDDDD;    
    color:                #000000;
    background: #CCCCCC -webkit-gradient(
        linear,
        left bottom,
        left top,
        color-stop(0, #CCCCCC),
        color-stop(1, #EEEEEE)
        );
    background: #CCCCCC -moz-linear-gradient(
        center bottom,
        #CCCCCC 0%,
        #EEEEEE 100%
        );    
}
a.nicebutton:hover {
    border:             solid 1px #999999;    
    background:            #EEEEEE;
    color:                #000000;    
}

JavaScript

$(document).ready(function()
                  {
                      AlertController = new PopupController('cAlertBox', 'ALERT', 'AlertController');
                      OkCancelController = new PopupController('cOkCancelBox', 'OKCANCEL', 'OkCancelController');
                      PromptController = new PopupController('cPromptBox', 'PROMPT', 'PromptController');
                  });

function LFP(theType)
{
    
    switch(theType)
    {
        case 1:
            AlertController.Spawn(
                {
                    'content': 'This is a test alert box.',
                    'okClickFunction': function()
                    {
                        alert('Test alert has been closed');
                    }
                });
            break;
        case 2:
            OkCancelController.Spawn(
                {
                    'content': 'Click OK to fire the OkClick function.',
                    'title': 'Are you sure?',
                    'okClickFunction': function()
                    {
                        alert('Wahoo, you\'ve clicked OK!');
                    },
                    'cancelClickFunction': function()
                    {
                        alert('Boo, you clicked cancel. sadfaic.');
                    }
                });
            break;
        case 3:
            PromptController.Spawn(
                {
                    'content': 'Please enter the text you\'d like echo\'d back at you in an ordinary alert.',
                    'title': 'OMG PROMPT',
                    'okClickFunction': function(thedata)
                    {
                        alert(thedata);
                    },
                    'cancelClickFunction': function(thedata)
                    {
                        alert('lol you cancelled. wimp.');
                    }
                });
            break;
            case 4:
            OkCancelController.Spawn(
            {
                'title':...