$(function() {
    function makemodal() {
        var modalgrid = document.createElement("div");
        modalgrid.className = "modal fade";
        modalgrid.setAttribute('id', "enlargeImageModal");
        modalgrid.setAttribute('tabindex', "-1");
        modalgrid.setAttribute('role', "dialog");
        modalgrid.setAttribute('aria-labelledby', "enlargeImageModal");
        modalgrid.setAttribute('aria-hidden', "true");
        modalgrid.innerHTML ="<div class=\"modal-dialog\" role=\"document\">\n" +
            "        <div class=\"modal-content\">\n" +
            "            <div class=\"modal-header\" style=\"background-color: #f0f0f03b; \"'>\n" +
            "              <h6 class=\"modal-title\">Podgląd</h6> " +
            "                <button type=\"button\" class=\"close\" data-dismiss=\"modal\" aria-label=\"Close\"><span aria-hidden=\"true\">X</span></button>\n" +
            "            </div>\n" +
            "            <div class=\"modal-body text-center\">\n" +
            "                <img src=\"\" class=\"enlargeImageModalSource\">\n" +
            "            </div>\n" +
            "        </div>\n" +
            "    </div>";


        document.body.appendChild(modalgrid);
    }

    $('a[rel="clearbox"]').on('click', function() {
        event.preventDefault();
        makemodal();

        var source = $(this);
        var tytul =source.children('img').attr('alt');

        $('.enlargeImageModalSource').attr('src', source.attr('href'));
        $('.modal-title').text(tytul);
        $('#enlargeImageModal').modal('show');


    });
});