DIY和其他教程：教程：如何使用弹窗元素

NewsPaper

Newspaper主题具有创建无限弹窗的功能，无需安装新的或付费的插件。Modal Popup元素使您能够控制所有功能。

这个短代码可以在tagDiv Composer列表中找到，并帮助你突出显示重要信息或内容。使用弹窗，您可以构建：

弹窗广告
弹窗菜单
促销活动和折扣
免费下载（电子书、软件、视频等）
警告和警报
多种表单类型（新闻稿、登录或注册）
完成向导或安装工具的多步骤过程
公告和活动
在线课程和服务

如何使用弹窗短代码

要在网站的弹出窗口中显示您的内容，您需要使用tagDiv Composer页面构建器打开一个页面并搜索Modal Popup短代码。将元素拖放到页面中。

: 弹窗元素; Modal-Popup.jpg (137.24 KiB) 查看 9065 次

通过选中Show modal in Composer框，您可以实时预览新创建的弹出窗口中的更改。

常规设置

有三种方法可以构建弹窗：

1.页面ID

要使用带有页面ID的弹窗，您需要按照以下步骤操作：

使用tagDiv Composer元素设计页面：添加图像、按钮、CTA、定价计划等。

: 文章ID; Post-ID.jpg (116.66 KiB) 查看 9065 次

将页面编号复制并粘贴到框中。

: 弹窗页面ID; Modal-Popup_page-id.jpg (93.18 KiB) 查看 9065 次

2.自定义内容

在这里，您可以添加任何类型的文本描述、HTML代码，并自定义弹窗布局、标题和内容。

重要！确保具有唯一ID值以防止错误。如果您复制了 Modal Popup，请修改Unique ID框中的值。

3. 弹窗ID

当您想使用已配置的弹窗，但位于其他位置时，可以使用此选项，并且您只能设置要在那里使用的模式ID。

模态布局

垂直和水平对齐 – 您可以选择弹窗框将打开的位置。
过渡效果
- Default（默认值）：系统预定义的标准过渡。
- Slide in：弹窗从特定方向滑入视图。
- None：弹窗立即出现，没有任何过渡或动画。

Triggers

: Triggers; Modal-Popup-Triggers.jpg (95.18 KiB) 查看 9064 次

在Triggers选项卡中，您可以选择四种不同方式之一来显示弹窗：

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来设置弹窗和按钮的样式。