Alert box by CSS & Javascript

CSS 3:

<style>
    .msgBox{
        position:absolute;
        z-index:10;
        border-radius:5px;
        border:1px solid #F5F5F5;
        background-color:#DDD;
        box-shadow:1px 1px 5px #999;
        overflow:hidden;
        display:none}
    .msgBox ul, .msgBox li{
        list-style:none;
        padding:0;
        margin:0;
        border:0}
        .msgBox .title{
            border-bottom:#AAA solid 1px;
            padding:5px;
            background-color:#CCC;
            font-family:Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
            font-weight:bold;
            text-shadow:1px 1px #DDD;
            font-size:12px}
        .msgBox .msgContent{
            border-top:#F5F5F5 solid 1px;
            padding:5px;
            text-shadow:1px 1px #F1F1F1;
            font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
            font-size:12px}
        .msgBox .ok{
            text-shadow:1px 1px #F1F1F1;
            font-family:Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
            font-size:12px;
            margin:0 auto 5px auto;
            width:20px;
            padding:4px 5px 4px 5px;
            background-color:#CCC;
            text-align:center;
            cursor:pointer;
            transition:all 300ms linear;
            border:#DDD solid 1px;
            box-shadow:0 0 1px #AAA;
            border-radius:4px}
        .msgBox .ok:hover{
            background-color:#EEE}   
</style>

Code (markup):

HTML:

<div class="msgBox">
    <ul class="title">Alert</ul>
    <ul class="msgContent">No messege</ul>
    <ul>
        <li class="ok">Ok</li>
    </ul>
</div>

Code (markup):

JS:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script language="javascript">
// Upgraded confirm function
var msgBox = function(msg){
    var w =$(document).width(),
        h = $(document).height();
    var msgW = $('.msgBox').width(),
        msgH = $('.msgBox').height();
    $('.msgBox').css({left:(w-msgW)/2, top:(h-msgH)/2});
    $('.msgBox')
        .show()
        .find('.msgContent').text(msg);
    $('.msgBox').find('.ok').click(function(){
        $('.msgBox').hide();
    });
    $(document).keyup(function(event){
        if(event.which==13){
            $('.msgBox').hide();
        }
    });
}
msgBox('Enter your message!');
</script>

Code (markup):

DEMO: http://www.yepi3games.org/alert.htm

 

uhm... what the blue devil is with the completely invalid markup with abuse of semantic elements via using UL without LI for non-list items?!? I mean, if it's a title make it the appropriate level heading (most likely a h2)... if it's a message and therein flow content, make it a paragraph... if you have an ok button, make it an anchor. (and before the scripttards say "use the BUTTON tag" if there's no FORM you shouldn't be abusing form elements...)

Likewise if those elements only work when scripting works, they should be made BY the script -- none of that has any business in the markup.

Also, you've got CSS, why are you screwing around with widths and heights in the scripting? Likewise why are you redeclaring the same values over and over again on the child elements?!?

... and of course pissing on accessibility by declaring font sizes in px can't be helping matters either... and of course I'd probably swing an axe at the jQuery crap that really isn't getting you much... though the outdated and deprecated language attribute shows that this seems to be outdated code...

Though wasting scripting on replicating existing functionality is a bit questionable -- but I can understand the desire to do so if you want consistent appearance and something more complex than plaintext in the content of the alert.

I'll see if I can fit in the time to do a rewrite of that to be a bit cleaner/proper.

 

... and here's the rewrite:
http://www.cutcodedown.com/for_others/vuVanBac/

Semantic markup, scripting only elements generated by the script when needed, removed from the DOM instead of hidden...

the script itself:

function popupMessage(title, message) {

	var d = document;
	
	function make(tag, classes, content, attribs, parent) {
		var e = d.createElement(tag);
		if (classes) e.className = classes;
		if (content) e.appendChild(
			typeof content == 'object' ? content : d.createTextNode(content)
		);
		if (attribs) for (var i in attribs) e[i] = attribs[i];
		if (parent) parent.appendChild(e);
		return e;
	}
	
	var
		messageBox = make('div', 'messageBox', make('h2', 0, title), 0, d.body),
		messageText = make('div', 'messageText', message, 0, messageBox),
		messageOk = make('a', 'messageOk', 'OK', {
			href : '#',
			onclick : function(e) { d.body.removeChild(messageBox); }
		}, messageBox);
		
	messageBox.style.margin = 
		'-' + (messageBox.clientHeight / 2) + 
		'px 0 0 -' + (messageBox.clientWidth / 2) + 'px';
		
	messageOk.focus();
	
}

Code (markup):

Is pretty simple. The 'd' var just reduces the total code size, the 'make' function lets us quickly and easily create new elements on the page... the three "messagexxx" variables are our added frame, text and ok, with the h2/title plugged in first. The OK button being an anchor means we can focus it, so we don't have to trap the keyboard. For positioning we can use negative margins to slide it into place, reducing the math and checks needed to center it since we can do left:50% and top:50% in the CSS.

Which the CSS isn't too fancy either:

.messageBox {
	position:absolute;
	top:50%;
	left:50%;
	z-index:999;
	padding-bottom:0.5em;
	text-align:center;
	background:#F0F8FF;
	border:1px solid #FFF;
	-webkit-border-radius:0.4em;
	-moz-border-radius:0.4em;
	border-radius:0.4em;
	box-shadow:2px 2px 5px #89A;
}

.messageBox h2 {
	padding:0.25em 0.5em;
	text-align:left;
	font:bold 100%/125% arial,helvetica,sans-serif;
	background:#CDE;
	border-bottom:1px solid #BCD;
	-webkit-border-radius:0.4em 0.4em 0 0;
	-moz-border-radius:0.4em 0.4em 0 0;
	border-radius:0.4em 0.4em 0 0;
}

.messageText {
	padding:1em;
}

.messageOk {
	display:inline-block;
	padding:0.1em 0.5em;
	text-decoration:none;
	color:#789;
	background:#CDE;
	border:1px solid #DEF;
	-webkit-border-radius:0.4em;
	-moz-border-radius:0.4em;
	border-radius:0.4em;
	-webkit-transition:background 0.3s;
	-moz-transition:background 0.3s;
	transition:background 0.3s;
}

.messageOk:active,
.messageOk:focus {
	color:#000;
	border:1px solid #AAA;
}

.messageOk:hover {
	background:#DEF;
}

Code (markup):

... and it's all elastic sized for accessibility instead of the garbage PX font size declarations.

No steenkin jQuery needed.