如何在模态窗口中显示图片
运行机制
要让用户更方便地查看图片,可通过自定义HTML代码设置在模态窗口中打开图片。您可以使用现有解决方案或添加自有代码。
如何获取
使用现有解决方案
- 在发布商帐户中打开您的项目,然后前往商店 > 网站部分。
- 单击打开建站器。
- 在所需区块中添加图片。可以是以下区块:
- 描述
- 图库
- 在自定义代码区块中插入以下代码:
Copy
- html
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>
- 在
blocks
参数中,指定要应用模态窗口的区块的CSS类名称。名称使用逗号分隔。如网站有多个相同区块,则这些区块均将应用这些设置。可以是:- .block--description(描述区块)
- .block--gallery(图库区块)
- 单击预览查看更改。
观看本说明的视频教程:
添加自有代码
- 在建站器中,单击添加区块,然后选择自定义代码。
- 在区块中插入自己的代码。
本文对您的有帮助吗?
感谢您的反馈!
我们会查看您的留言并运用它改进用户体验。有用链接
上次更新时间: 2025年7月14日发现了错别字或其他内容错误? 请选择文本,然后按Ctrl+Enter。