如何在模态窗口中显示图片

运行机制

要让用户更方便地查看图片,可通过自定义HTML代码设置在模态窗口中打开图片。您可以使用现有解决方案添加自有代码

如何获取

使用现有解决方案

  1. 在发布商帐户中打开您的项目,然后前往商店 > 网站部分。
  2. 单击打开建站器
  3. 在所需区块中添加图片。可以是以下区块:
    • 描述
    • 图库
  4. 自定义代码区块中插入以下代码:
Copy
Full screen
Small screen
 1<script>
 2(function () {
 3  var blocks = ['.block--description', '.block--gallery'];
 4
 5  var style = document.createElement('link');
 6  style.rel = 'stylesheet';
 7  style.href = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css';
 8  document.getElementsByTagName('head')[0].appendChild(style);
 9
10  var script = document.createElement('script');
11  script.type = 'text/javascript';
12  script.src = 'https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js';
13  script.addEventListener('load', function () {
14    var fancyBoxClass = 'image-fancybox';
15    blocks.forEach(function (block) {
16      $(block)
17        .find('[data-bg]')
18        .toArray()
19        .forEach(function (element) {
20          var url = element.getAttribute('data-bg')
21            .replace('url(', '')
22            .replace(')', '')
23            .replace('"', '')
24            .trim();
25          if (url === '') {
26            return;
27          }
28          $(element)
29            .parent()
30            .wrap('<a style="width: 100%; height: 100%;" class="' + fancyBoxClass + '" href="' + url + '"></a>');
31        });
32    });
33
34    $('.' + fancyBoxClass)
35      .fancybox();
36  }, false);
37  document.getElementsByTagName('body')[0].appendChild(script);
38})();
39</script>

  1. blocks参数中,指定要应用模态窗口的区块的CSS类名称。名称使用逗号分隔。如网站有多个相同区块,则这些区块均将应用这些设置。可以是:
    • .block--description(描述区块)
    • .block--gallery(图库区块)
  2. 单击预览查看更改。

观看本说明的视频教程:


添加自有代码

  1. 在建站器中,单击添加区块,然后选择自定义代码
  1. 在区块中插入自己的代码。
本文对您的有帮助吗?
谢谢!
我们还有其他可改进之处吗? 留言
非常抱歉
请说明为何本文没有帮助到您。 留言
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。

有用链接

上次更新时间: 2025年7月14日

发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。

报告问题
我们非常重视内容质量。您的反馈将帮助我们做得更好。
请留下邮箱以便我们后续跟进
感谢您的反馈!
无法发送您的反馈
请稍后重试或发送邮件至doc_feedback@xsolla.com与我们联系。