当用户单击任何图像时如何创建弹出窗口？答案

【问题标题】：How to create a popup when user clicks on any images?当用户单击任何图像时如何创建弹出窗口？
【发布时间】：2017-10-05 14:07:54
【问题描述】：

我正在 Shopify 上开发一个网站。我需要知道如何创建可点击的图片库。当用户单击图库中的任何图像时，会出现一个带有描述和图像的弹出窗口。

到目前为止，我已经完成了图库，我唯一需要知道的是如何通过弹出屏幕使图库可点击。

这是 gallery-data.js.liquid 文件的代码：

        var gallery = [         
        {
          "img": "{{ 'Square_102.jpg' | file_img_url: "x270" }}",
            "text": "Gulvmontert",
        },
       {
          "img": "{{ 'Bille-_-Jo.png'| file_img_url: "x270"}}",
            "text": "Bille og Jo",
        },{
          "img": "{{ 'Square_015.jpg'| file_img_url: "x270"}}",
            "text": "Inspirasjon ",
        },{
          "img": "{{ 'Square_102.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },{
          "img": "{{ 'Square_015.jpg'| file_img_url: "x270"}}",
            "text": "Square",
        },{
          "img": "{{ 'Square_069.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },{
          "img": "{{ 'Square_102.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },{
          "img": "{{ 'Square_102.jpg'| file_img_url: "x270"}}",
            "text": "Veggmontert",
        },

    ];

     Here's the code for the gallery.js.liquid file: 

    function view(imgsrc) {
        viewwin = window.open(imgsrc, 'viewwin', 'width=600,height=300');
    }

    function RenderHtml() {
        var output = "";
        for (i = 0; i < gallery.length; ++i) {
            output += '<div class="gallery"><a target="_blank" rel="noopener 
            noreferrer">';
            output += ' <a target="_blank" rel="noopener noreferrer">';
            output += '     <img src="' + gallery[i].img + '" 
         onclick="view("' + gallery[i].img + '")" alt="Forest" /';
            output += ' </a>';
          //  output += ' <div class="desc">' + gallery[i].text + '</div>';
            output += '</div>';
        }
        document.getElementById('output').innerHTML = output;
    }
    window.onload = function () {
        RenderHtml();
    }

【问题讨论】：

错误是什么？
尝试获取任何图像，然后设置监听器。您可以通过访问它们来访问它们，例如 gallery[0].img.addEventListener ....
你真的尝试过吗？这是为了帮助/调试，而不是为你写整个东西。
有很多现成的 jquery 插件。你可以使用任何人。
你推荐什么插件？

标签： javascript html css popup shopify

【解决方案1】：

为了显示图像和更多信息，您可以使用 Bootstrap 中的模式。通过事件（单击图像），您可以获得信息应该在模式中的信息。

W3School Modal Bootstrap

【讨论】：