Вот тебе простейший пример:
<!DOCTYPE html>
<meta charset="utf-8" />
<style>
.modal{
position: fixed;
width: 700px;
max-width: 100%;
max-height: 100%;
height: 700px;
margin: auto;
overflow: auto;
background: #fefefe;
border-radius: 10px;
box-shadow: 0 0 30px rgba(0, 0, 0, 0.4);
padding: 10px;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
</style>
<script>
function Modal() {
this.element = document.createElement('div');
this.element.className = 'modal';
}
Modal.prototype.show = function() {
document.body.appendChild(this.element);
}
Modal.prototype.hide = function() {
document.body.removeChild(this.element);
}
Modal.prototype.setContent = function(html) {
this.element.innerHTML = html;
}
</script>
<body>
<script>
var modal = new Modal();
modal.setContent('<h4>Это модальное окно</h4>');
</script>
<button onclick="modal.show()">Открыть окно</button>
</body>
Есть готовые реализации, со всякими плюшками. Самая популярная - fancybox (зависит от jQuery). Есть и без зависимостей.