如何创建内容锁定弹出窗口

创建一个弹出窗口,以防止访问者看到页面内容,除非他们单击弹出窗口中的特定按钮。

您将学习如何创建一个弹出窗口:

  1. 向访问者询问是或否问题,并允许访问者单击是按钮或否按钮
  2. 如果访问者单击“是”按钮,则显示页面内容,如果访问者单击“否”按钮或单击“是”按钮以外的任何位置,则将访问者重定向到另一个 URL。\
https://youtube.com/watch?v=hEsoZGyNkCY%3Ffeature%3Doembed

设计弹出窗口及其内容 #

  1. 转到Templates > Popups > Add New并为您的新 Popup 命名。(另一种方法是按CMD+ECTRL+E打开Finder,搜索 Popup ,选择Add New Popup,然后给它一个名字。)
  2. 选择预先设计的弹出窗口模板或关闭库覆盖并从头开始设计您的弹出窗口。对于这个例子,我们将自己设计。

弹出 > 布局选项卡 #

  1. 宽度:设置为 600px
  2. 高度:选择自定义
  3. 自定义高度:设置为 800px
  4. 垂直位置:中心
  5. 关闭按钮:设置为隐藏
  6. 入口动画:选择淡入

内容 #

  1. 添加一个询问是或否问题的标题,并根据需要设置样式。
  2. 添加两个按钮,一个用于是,一个用于否,并根据需要设置每个按钮的样式。
  3. 单击  面板左下方的齿轮/齿轮图标 以返回弹出设置

弹出 > 样式选项卡 #

  1. 背景类型:透明
  2. 图片:添加背景图片并根据需要调整其设置

弹出 > 高级选项卡 #

  1. Padding:左右设置为80px,离开 顶部
     和底部空白
  2. 防止关闭覆盖:设置为是
  3. 阻止在 ESC 键上关闭:设置为是

编辑部分 #

部分 > 样式 > 边框 #

  1. 边框类型:实心
  2. 边框宽度:15px
  3. 颜色:为边框选择颜色
  4. 边框半径:仅底部 40

部分 > 高级 #

填充:仅底部 30 像素。


编辑列 #

列 > 样式 #

  1. 背景类型:渐变
  2. 颜色:选择第一个渐变色
  3. 第二种颜色:选择第二种渐变颜色
  4. 类型: 径向

边界 #

  1. 边框半径:仅底部 20px
  2. 盒子阴影:根据需要设置

栏目 > 高级 #

  1. 边距:为顶部和左侧设置 -30(减 30)
  2. Padding : 为顶部和底部设置 100px

编辑内容 #

标题 > 样式 #

标题:将颜色设置为白色。

按钮 > 样式 #

文本颜色:将每个按钮的颜色设置为白色。

编辑是按钮 #

内容:

  1. 链接:单击动态图标并选择操作 > 弹出窗口
  2. 再次点击弹出
  3. 选择关闭弹出窗口并将不再显示滑动到是

编辑否按钮 #

内容

链接:输入任何适合年龄的网站链接


设置发布选项 #

单击发布按钮。此弹出窗口没有条件、触发器或高级规则,因此请单击“保存并关闭”按钮。


编辑包含“购买”按钮(或您创建的用于启动弹出窗口的任何按钮)的页面。

编辑购买按钮 #

  1. 如果您还没有创建一个按钮来启动弹出窗口,您现在可以这样做。根据需要编辑其文本和排版
  2. 链接:单击动态图标并选择操作 > 弹出窗口
  3. 再次单击 Popup,然后在 Action 下选择Open Popup
  4. 在 Popup 字段中,输入几个字母以搜索/查找您刚刚创建的 Popup。
  5. 单击更新按钮以更新页面。

全部完成。现在转到带有“购买”按钮的页面,单击它,然后查看正在运行的弹出窗口。 

Powered by BetterDocs

发表评论

您的电子邮箱地址不会被公开。

Scroll to Top