[juegosfrivs]

CSS:

<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>

HTML:

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

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>

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