如何在用户点击任何图像时创建弹出窗口？

我正在Shopify上开发一个网站。我需要知道如何创建可点击的图库。当用户点击图库中的任何图像时，会出现一个包含说明和图像的弹出窗口。如何在用户点击任何图像时创建弹出窗口？

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

下面是画廊，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(); 
    }

来源

2017-10-05 tor daniel

什么是错误？ – Niladri

尝试访问任何图像，然后设置侦听器。你可以通过访问他们像画廊[0] .img.addEventListener .... – Jason

你有没有尝试过它？这是为了帮助/调试，而不是为你写整个事情。 –

用于显示图像和更多的信息，您可以使用模式从引导。随着事件（点击图片），你可以得到信息应该在模态中的信息。

W3School Modal Bootstrap

来源

2017-10-05 14:18:50

如何在用户点击任何图像时创建弹出窗口？

回答

相关问题