Alert by CSS3 & Javascript

[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

[devote]

juegosfrivs,
а зачем jQuery? выравнивание можно делать и без него...

<style type="text/css">
html, body {
padding: 0;
margin: 0;
}

/* для выравнивания блока по вертикали */
.msg-box-wrapper {
display: none;
position: fixed;
width: 100%;
height: 100%;
}

/* заднее затемнение */
.msg-box-wrapper .shadow {
position: absolute;
background-color: #000000;
opacity: 0.03;
width: 100%;
height: 100%;
}

/* для выравнивания блока по горизонтали */
.msg-box-wrapper .msg-box-cell {
display: table-cell;
position: relative;
text-align: center;
vertical-align: middle;
}

/* Окно с сообщением */
.msg-box {
display: inline-block;
border-radius: 5px;
border: 1px solid #f5f5f5;
background-color: #ddd;
box-shadow: 1px 1px 5px #999;
overflow: hidden;
text-align: left;
}

/* Заголовок окна */
.msg-box .title {
background: #ccc;
border-bottom: 1px solid #aaa;
padding: 5px;
font: bold 12px Arial;
}

/* Сообщение */
.msg-box .msg-content {
font: normal 12px Times;
padding: 5px;
}

/* Обертка кнопки */
.msg-box .button {
text-align: center;
padding: 0 0 5px 0;
}

/* Кнопка */
.msg-box .button button {
text-shadow: 1px 1px #f1f1f1;
font: normal 12px Times;
background-color: #ccc;
transition: all 300ms linear;
border: #ddd solid 1px;
box-shadow: 0 0 1px #aaa;
border-radius: 4px;
outline: none;
}

/* Кнопка при наведении мыши */
.msg-box .button button:hover {
background-color: #eee;
}
</style>

<div class="msg-box-wrapper">
<div class="shadow"></div>
<div class="msg-box-cell">
<div class="msg-box">
<div class="title">Alert</div>
<div class="msg-content">Enter your message!</div>
<div class="button"><button>Ok</button></div>
</div>
</div>
</div>

<a href="" onclick="document.querySelector('.msg-box-wrapper').style.display = 'table'; return false;">Открыть Алерт</a>

<script type="text/javascript">
document.querySelector('.button button').onclick = function() {
document.querySelector('.msg-box-wrapper').style.display = 'none';
};
</script>