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>