Чет начал писать, хотел с CSS-анимацией поиграться, потом лень стало… короче вот примерно так делается без jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
.alert .alert-shadow {
position: fixed;
top: 0;
width: 100%;
height: 100%;
left: 0;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
.alert .alert-dialog {
position: fixed;
top: 30%;
left: 50%;
width: 300px;
margin-left: -150px;
padding: 10px 0;
background: #fff;
border: 1px solid #000;
}
.alert .alert-text {
padding: 10px;
}
.alert .alert-controls {
text-align: center;
}
</style>
</head>
<body>
<script>
function Alert(text) {
this._create(text);
}
Alert.prototype = {
constructor: Alert,
html: [
'<div class="alert">',
'<div class="alert-shadow"></div>',
'<div class="alert-dialog">',
'<div class="alert-text">',
'{TEXT}',
'</div>',
'<div class="alert-controls">',
'<button>OK</button>',
'</div>',
'</div>',
'</div>'
].join(""),
_rootElement: null,
_create: function (text) {
var node = document.createElement("div");
node.innerHTML = this.html.replace("{TEXT}", text);
this._rootElement = node.firstChild;
this._addEvents();
},
_addEvents: function () {
var thisAlert = this;
this._rootElement.getElementsByTagName("button")[0].onclick = function () {
thisAlert.close();
};
},
show: function () {
document.body.appendChild(this._rootElement);
},
close: function () {
document.body.removeChild(this._rootElement);
}
};
</script>
<button onclick="new Alert('Работает!').show();">Show</button>
</body>
</html>
IE7+ из-за position:fixed
