[tsigel]

Только будте осторожны, $ - это не 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>