チュートリアルモーダルを使用する - ライブラリとサンプル

Question

チュートリアルの一形式としてモーダルを使用するサンプルまたはライブラリを探しています。基本的に、ユーザーは初めてWebサイトにアクセスし、Webアプリケーションの機能と領域を説明する一連のモーダル（またはその他のオブジェクト）をガイドします。基本的には、1つのモーダルで歓迎してから、別のものを開いていくつかの機能を指し示して閉じ、別のものを指し示し、別のものを指すようにします。

私はこれまでに見ましたが、私の検索用語は私をモーダルを構築する方法に関するチュートリアルに持ち込むように見えるので、良い例を見つけてください。私はそれの流れを既に探しています、あるいは誰かがこれを達成するように設計された図書館を知っていれば。

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

ユーザーは、私が探していたものである、モーダルを使用してウェブサイトを中心に歩いたことができます。

それの「チュートリアル」の部分

は次のように設定することができます。