使用模态的教程 - 库和示例

【问题标题】：Tutorials Using Modals - Libraries and Examples使用模态的教程 - 库和示例
【发布时间】：2016-09-16 16:21:50
【问题描述】：

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

我以前见过它，但我似乎找不到任何好的例子，因为我的搜索词似乎将我带到了有关如何构建模态的教程。我正在寻找已经存在的流程，或者如果有人知道旨在实现此目的的库。

【问题讨论】：

标签： javascript jquery twitter-bootstrap web-applications

【解决方案1】：

我的一个朋友找到了this project (Hopscotch)，它几乎完成了我一直在寻找的东西。他们还设置了JSFiddle 来演示它的一些功能。

它的“教程”部分可以这样配置：

 {
    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."
      }
    ]
  }

用户可以使用模态浏览您的网站，这正是我所寻找的。p>

【讨论】：