模态框无法正常工作。

Question

我用jQuery制作了一个模态框，但它似乎不能正常工作。我在javascript函数中调用我的图像，并且模态框在同一页面的window.onload中加载。我首先加载图像，但是如果我直接将img放入HTML中并从window.onload中删除其他内容，则模态框才能正常工作。以下是我调用所有img的方式：

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>";
}

使用modal时，需要结合window.onload事件:

        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);
                    });

    }

- anuseranother

---

你能为此制作一个 JS Fiddle 吗？ - Kundan Singh Chouhan

对于初学者来说，一次性将所有HTML注入DOM中......img.innerHTML += "</div>"; = 不要这样做。在变量上构建你要注入的内容，完成所有构建后再进行注入。此外，尝试使用insertAdjacentHTML而不仅仅是修改innerHTML。 - Rooster

这里是 jsfiddle：https://jsfiddle.net/qcxd7cta/ - anuseranother

很抱歉，@anuseranother，您的例子已经出错了。 - Wédney Yuri

我解决了。看来把jQuery和JS放在同一个函数文件中出了一些问题。现在已经改变了它，现在可以很好地工作了，在maisGaleria函数内部有模态窗口。谢谢！ - anuseranother

Answer 1

@anuseranother，你的代码中有几个错误。

在调用window.onload之前，你需要先声明/定义maisGaleria方法。

根据你的jsfiddle，它会抛出“maisGaleria未定义”的错误。所以在使用它之前请先定义它。

修复这个错误后，另一个错误是“无法设置null的'onload'属性”。在dom中没有#pics元素（y = document.querySelector("#pics")），而你正在引用它并添加onload方法。请更新这两个内容，并告诉我们你需要一个带有图像的模态框，在互联网上有任何示例。

- Kalyan Kumar S