Только будте осторожны, $ - это не jquery!
<style>
html, body {
width: 100%;
height: 100%;
}
.modal {
display: none;
}
.block {
width: 100%;
height: 100%;
background-color: rgba(0,0,0, 0.6);
position: fixed;
left: 0;
top: 0;
}
.modal-content {
border: 1px solid #eee;
border-radius: 3px;
position: fixed;
left: 50%;
top: 50%;
background-color: #fff;
transform: translate(-50%, -50%);
-webkit-transform: translate(-50%, -50%);
padding: 10px 15px;
}
.modal-content .close {
position: absolute;
right: 10px;
top: 10px;
}
</style>
<a class="show-modal">Открыть окно</a>
<div class="modal">
<div class="block"></div>
<div class="modal-content">
<div class="close">X</div>
<div class="header"></div>
<div class="content"></div>
<div class="footer"></div>
</div>
</div>
<script>
var $ = document.querySelector.bind(document);
var showModal = function (headerText, contentText, footerText) {
$('.modal').style.display = 'block';
$('.header').innerHTML = headerText;
$('.content').innerHTML = contentText;
$('.footer').innerHTML = footerText;
};
$('.close').addEventListener('click', function () {
$('.modal').style.display = 'none';
}, false);
$('.show-modal').addEventListener('click', function () {
showModal('Какой-то заголовок!', '<h1>какой-то контент</h1>', 'какой-то футер');
}, false);
</script>