Question

我正在寻找使用模态作为教程形式的示例或库。基本上，用户第一次访问网站并被引导通过一系列概述Web应用程序的功能和区域的模态（或其他对象）。基本上，从一个模态欢迎开始，然后关闭它以打开另一个指向某些功能，关闭它并指向另一个，冲洗并重复......

我以前见过它，但我似乎无法找到任何好的例子，因为我的搜索术语似乎带我到如何构建模态的教程。我正在寻找它已经存在的流程，或者如果有人知道一个旨在实现这一目标的库。

Answer 1

我的一位朋友找到this project (Hopscotch)，这完成了我正在寻找的东西。他们还设置了JSFiddle来演示其中的一些功能。

＆＃34;教程＆＃34;部分内容可以配置为：

 {
    id: "welcome_tour",
    steps: [
      {
        target: "header",
        placement: "bottom",
        title: "This is the navigation menu",
        content: "Use the links here to get around on our site!"
      },
      {
        target: "profile-pic",
        placement: "right",
        title: "Your profile picture",
        content: "Upload a profile picture here."
      },
      {
        target: "inbox",
        placement: "bottom",
        title: "Your inbox",
        content: "Messages from other users will appear here."
      }
    ]
  }

用户可以使用模式在您的网站上走动，这正是我所寻找的。

教程使用模态 - 库和示例

1 个答案: