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ライフを！