мне дополнительно понадобилась возможность рекурсивного вызова и автоматическая подгонка ширины и выравнивание по центру. По этому немного переделал код Octan'а
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>…</title>
<style>
body{
padding:10px;
margin:0px;
}
.shadow {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.3;
}
.common_dialog {
position: fixed;
left: 50%; /*по горизонтали*/
transform: translateX(-50%);
max-width: 95%; /*по вертикали*/
top: 5%;
box-sizing: border-box; /*что бы padding не влиял на высоту*/
max-height: 90%;
overflow : auto; /*полосы прокрутки*/
background: #fff;
border: 1px solid #000;
padding: 10px;
}
</style>
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
</head>
<body>
<script>
function Alert() {
this._$base = $('<div><div class="shadow"></div></div>');
}
Alert.prototype = {
constructor: Alert,
show: function ($element) {
$element.addClass("common_dialog");
this._$base.append($element).appendTo($("body"));
},
close: function () {
this._$base.remove();
}
};
function my_open(){
var alert = new Alert;
$element = $('<div><h2>Привет</h2><p>некоторый текст Lorem ipsum dolor set amit consectetur </p><br>\
<button id="onclose">close</button>\
<button onclick="my_open()">open</button>\
</div>');
$element.find("#onclose").click(alert.close.bind(alert));
alert.show($element);
}
</script>
<button onclick="my_open()">open</button>
</body>
</html>
правда с использованием jQuery