Modal doesn't work

Question

I made a modal using jQuery, but it doesn't seem to work properly. I'm calling my images in a javascript function, and the modal is in my window.onload in the same page the images are loaded. I'm loading the images first, but the modal only works if i put the imgs directly in the HTML and if i take everything else from the window.onload. That's how i'm calling all imgs:

function maisGaleria(n){

    var galeria = new Array();
    var img = document.querySelector("#gallery");
    var pic = 0;

        if(n == 1){
            pic = 4;
        }else if(n == 2){
            pic = 7;
        }else{
            pic = 4;
        }

        img.innerHTML = "<div class='row'>";
        img.innerHTML += "<div class='six columns'>";
        img.innerHTML += "<h4>Galeria "+n+"</h4>";

        for(var i = 0; i < pic; i++){
            galeria[i] = "foto"+n+"_"+(i+1)+".jpg";
        }

        for(var i = 0; i < galeria.length; i++){
            img.innerHTML += "<img src='img/"+galeria[i]+"' class='imgs-modal'>";
        }

        img.innerHTML += "</div>";
        img.innerHTML += "</div>";
}

and the window.onload with the modal:

        window.onload = function(){

        var rdSocial = document.querySelector("#social");
        var teste = document.querySelector("#teste");

            var fb = '<img src="img/fb.png" value="1" class="img" onclick="redireciona(this);">';
            var twt = '<img src="img/twitter.png" value="2" class="img" onclick="redireciona(this);">';
            var insta = '<img src="img/insta.png" value="3" class="img" onclick="redireciona(this);">';

            rdSocial.innerHTML += fb;
            rdSocial.innerHTML += twt;
            rdSocial.innerHTML += insta;

            var x = location.search.split("?gal=")[1];

            y = document.querySelector("#pics");

            //console.log(x);

            y.onload = maisGaleria(x);

//the modal starts here
                    $('.imgs-modal').on('click', function(){

                        var obj = $(this).clone();
                        console.log(obj);

                        $("#box_modal").html(obj);
                        $("#modal").fadeIn(1000);                   
                    });

                    $(".fechar").on('click', function(){
                        $("#modal").fadeOut(1000);
                    });

    }

Answer 1

@anuseranother there are few errors in you code.

Before calling maisGaleria method in window.onload, you have to declare/define it.

As per your jsfiddle, it is throwing errors like maisGaleria is not defined. So define maisGaleria it before using it.

After fixing this error, another error is "Cannot set property 'onload' of null". There is no #pics element in the dom (y = document.querySelector("#pics")) and you are referencing it and adding onload method to it. Please update these two and let us know exactly how you need a modal with images any example in internet.