DIY和其他教程：教程：如何使用弹窗元素
发表于 ： 2025年 1月 21日 13:53
Newspaper主题具有创建无限弹窗的功能，无需安装新的或付费的插件。Modal Popup元素使您能够控制所有功能。
这个短代码可以在tagDiv Composer列表中找到，并帮助你突出显示重要信息或内容。使用弹窗，您可以构建：
要在网站的弹出窗口中显示您的内容，您需要使用tagDiv Composer页面构建器打开一个页面并搜索Modal Popup短代码。将元素拖放到页面中。
通过选中Show modal in Composer框，您可以实时预览新创建的弹出窗口中的更改。
常规设置
有三种方法可以构建弹窗：
1.页面ID
要使用带有页面ID的弹窗，您需要按照以下步骤操作：
2.自定义内容
在这里，您可以添加任何类型的文本描述、HTML代码，并自定义弹窗布局、标题和内容。
当您想使用已配置的弹窗，但位于其他位置时，可以使用此选项，并且您只能设置要在那里使用的模式ID。
模态布局
在Triggers选项卡中，您可以选择四种不同方式之一来显示弹窗：
1. 按钮
如果启用此选项，则可以显示一个按钮，当用户单击该按钮时，将打开弹窗。短代码会出现在网站上，直到用户点击“X”图标（或您想要显示的图标）。
2. 页面加载
如果启用页面加载，则可以指定在页面加载后何时在没有按钮的情况下自动打开模式：
3. 光标
此选项可帮助主题检测访客何时希望离开页面。如果用户想从浏览器关闭 X 图标，则弹窗将显示。
4. 滚动
通过启用滚动选项，您可以设置一定的滚动距离以显示弹窗。
Style和CSS选项卡
在这些选项卡中，您可以通过自定义样式、文本、阴影、背景、标题部分以及边距、边框、宽度等的高级CSS来设置弹窗和按钮的样式。
这个短代码可以在tagDiv Composer列表中找到，并帮助你突出显示重要信息或内容。使用弹窗，您可以构建：
- 弹窗广告
- 弹窗菜单
- 促销活动和折扣
- 免费下载（电子书、软件、视频等）
- 警告和警报
- 多种表单类型（新闻稿、登录或注册）
- 完成向导或安装工具的多步骤过程
- 公告和活动
- 在线课程和服务
要在网站的弹出窗口中显示您的内容，您需要使用tagDiv Composer页面构建器打开一个页面并搜索Modal Popup短代码。将元素拖放到页面中。
- 弹窗元素
- Modal-Popup.jpg (137.24 KiB) 查看 9066 次
常规设置
有三种方法可以构建弹窗：
1.页面ID
要使用带有页面ID的弹窗，您需要按照以下步骤操作：
- 使用tagDiv Composer元素设计页面：添加图像、按钮、CTA、定价计划等。
- 文章ID
- Post-ID.jpg (116.66 KiB) 查看 9066 次
- 将页面编号复制并粘贴到框中。
- 弹窗页面ID
- Modal-Popup_page-id.jpg (93.18 KiB) 查看 9066 次
在这里，您可以添加任何类型的文本描述、HTML代码，并自定义弹窗布局、标题和内容。
3. 弹窗ID重要！确保具有唯一ID值以防止错误。如果您复制了 Modal Popup，请修改Unique ID框中的值。
当您想使用已配置的弹窗，但位于其他位置时，可以使用此选项，并且您只能设置要在那里使用的模式ID。
模态布局
- 垂直和水平对齐 – 您可以选择弹窗框将打开的位置。
- 过渡效果
- Default（默认值）：系统预定义的标准过渡。
- Slide in：弹窗从特定方向滑入视图。
- None：弹窗立即出现，没有任何过渡或动画。
- Triggers
- Modal-Popup-Triggers.jpg (95.18 KiB) 查看 9065 次
1. 按钮
如果启用此选项，则可以显示一个按钮，当用户单击该按钮时，将打开弹窗。短代码会出现在网站上，直到用户点击“X”图标（或您想要显示的图标）。
2. 页面加载
如果启用页面加载，则可以指定在页面加载后何时在没有按钮的情况下自动打开模式：
- open delay after several seconds（延迟几秒钟打开）
- auto close after various seconds（在多少秒后自动关闭）
- do not open for several hours（几个小时内不要打开）
3. 光标
此选项可帮助主题检测访客何时希望离开页面。如果用户想从浏览器关闭 X 图标，则弹窗将显示。
4. 滚动
通过启用滚动选项，您可以设置一定的滚动距离以显示弹窗。
Style和CSS选项卡
在这些选项卡中，您可以通过自定义样式、文本、阴影、背景、标题部分以及边距、边框、宽度等的高级CSS来设置弹窗和按钮的样式。