Jimdo用HTML5实现模态框教程详解

2、为其定义 CSS：.modal-target { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.8); z-index: 999; }

3、添加 .modal-target:target { display: block; }

4、使用链接触发：打开模态框

四、集成 SimpleModal.js 轻量库（需外链 CDN）

当需要更丰富交互（如拖拽、动画、键盘 ESC 关闭）时，可引入外部轻量模态库。SimpleModal.js 体积小（约 4KB）、无 jQuery 依赖，Jimdo 允许在页脚 HTML 插入 script 标签引用 CDN。

1、在 Jimdo “设置 > 页脚 HTML” 中添加：

2、在页面 HTML 区块中写入触发按钮与模态框结构，其中 $('#basic-modal-content').modal(); 用于初始化

3、确保模态框容器具有唯一 ID，例如

4、遮罩层颜色通过 overlayCss: { backgroundColor: '#000', opacity: 0.7 } 参数设定

好了，本文到此结束，带大家了解了《Jimdo用HTML5实现模态框教程详解》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！