bootstrap modalを使ったIntro.jsの紹介:

bootstrap modalを使ったIntro.jsの紹介

web画面の操作説明は、いつもIntro.jsを使っています。

PDFでマニュアルを作って、ボタンからダウンロードしてもらうのでもいいんですが、できるかぎりweb画面で完結したいものです。

今回は、bootstrapのmodalに対してもIntro.jsで画面説明する方法をご紹介します。

まずは、DEMOをご確認ください。

※ DEMOの「画面の説明開始」ボタン押下で、画面の説明が表示されます。

使用したライブラリとバージョン

• jQuery : 3.3.1
• Bootstrap : 4.1.3
• Intro.js : 2.9.3

DEMO

https://wakaba-bbq.github.io/Modal_Recommend/

github

https://github.com/wakaba-bbq/Modal_Recommend

Intro.js

https://introjs.com/

内容

今回の画面説明では、Intro.jsに必要な「data-step」・「data-intro」の属性をjavascriptにて動的に設定しています。

理由としては、htmlの各タグに「data-step」属性を直接書いてしまった場合、抜け漏れが発生した際にすべての「data-step」の修正が発生し、時間がかかってしまうためです。

また、親画面とmodal画面の2つの画面を別々に説明しているため、必要な説明を適時判断させる必要があります。

index.js

step = 1; 
intro = ""; 
 
// aaa 
$('#aaa').attr('data-step', step); 
intro = 'aaa 説明①'; 
intro += '<br>' + 'aaa 説明②'; 
intro += '<br>' + 'aaa 説明③'; 
$('#aaa').attr('data-intro', intro); 
step++; 
 
// bbb 
$('#bbb').attr('data-step', step); 
intro = 'bbb 説明①'; 
intro += '<br>' + 'bbb 説明②'; 
intro += '<br>' + 'bbb 説明③'; 
$('#bbb').attr('data-intro', intro); 
step++; 

このように「data-step」を加算しながら、説明したいタグに属性を追加することで、説明箇所の抜け漏れが発生してもすぐに修正できます。

index.js

introJs().setOptions({ 
    nextLabel:"次へ", 
    prevLabel:"前へ", 
    skipLabel:"スキップ", 
    doneLabel:"終了" 
    }).start().onbeforeexit(function(){ 
        $('[data-step]').each(function(index, value){ 
        $(this).removeAttr('data-step data-intro'); 
    }); 
}); 
 

introJsのonbeforeexitを利用して、Intro.jsでの画面説明が終わった後に「data-step」属性を持っているタグに対し「data-step」・「data-intro」を削除しています。

こうすることで、親画面・modal画面の説明を分けて実装することができます。

modal画面にIntro.jsを導入して、画面説明するには、2つ注意点があります。

index.js

introJs('#exampleModal').setOptions({ 
    nextLabel:"次へ", 
    prevLabel:"前へ", 
    skipLabel:"スキップ", 
    doneLabel:"終了" 
    }).start().onbeforeexit(function(){ 
        $('[data-step]').each(function(index, value){ 
        $(this).removeAttr('data-step data-intro'); 
    }); 
}); 

まずは、1行目の「introJs('#exampleModal')」のように、introJsの括弧の中に対象となるmodalの中に、modalの一番外側のdivのidを指定すること。

introjs.css

.introjs-fixParent { 
  /* z-index: auto !important; */ 
  opacity: 1.0 !important; 
  -webkit-transform: none !important; 
     -moz-transform: none !important; 
      -ms-transform: none !important; 
       -o-transform: none !important; 
          transform: none !important; 
} 

もう一つは、introjs.cssの「.introjs-fixParent」の「z-index: auto !important;」をコメントアウトすることです。

その他の機能

DEMOには、modalの中のタブを、親画面のボタンにてactiveにする方法や「html」のみでmodalを表示する方法と、「javascrip」を使ってmodalを表示する方法を実装しています。

よきmodalライフを！