(CSS+Javascript)モーダルでチュートリアル風に特定の要素だけ目立たせる

4392 ワード
デザイン モーダル JavaScript チュートリアル CSS CSS テキストリンク

サイト上の新機能やコンテンツの説明をしたい時などに
特定の要素(ボタンなど）だけを目立たせて
説明したい時に使う「チュートリアル風」表現を
プラグイン無しでCSS+Javascriptで実現します。

DEMOページ

※Cookieやセッションと組み合わせて1度だけ表示する想定です。

プラグインの説明などは見かけますがゼロベースが
あまり無かったので自作しました。

概要と解説

コードは長く見えますが内容はとてもシンプルです。
ポイントは下記のレイヤーの考え方です。
Javascriptは表示非表示スタイルの変更しかしていません。

レイヤーの順番：（上が前面）
　・目立たせたい要素達
　・モーダル（灰色部分）
　・モーダルに隠れる要素達

CSSとJSの役割
・モーダル（灰色の部分）：
　CSSで高さと幅が100%のブロックを作ります。

・目立たせる要素の部分：
　CSSでレイヤーをモーダルより前面にします。
　position + z-indexでコントロールします。
　例ではモーダルを9999、目立たせたい要素を15000としています。

・モーダルの表示ON/OFF
　表示と非表示はJavascriptを使っています。
　単純に、モーダル要素をクリックするとdisplay:noneで
　モーダルおよび機能の説明用テキストを非表示にします。

コード

HTML部分：
モーダル自体のHTML部分はdivで囲んで
idとclass名を与えているだけです。
部品についても同じです。

<!-- 目立たせたい要素 -->
<div class="pickupblock">
    <input type="button" class="bt" value="対象のボタン">
    <div id="setsumeitext">
    ↑まずはこのボタンの役割を覚えましょう！
    </div>
</div>

<!-- モーダル部分 -->
<div class="modaloverlay" id="modaloverlay_id">
</div>

CSS部分：
モーダルは最初非表示にしておく場合はdisplay:noneにしておきます。
例ではJSであえて表示するようにしているのでページ開いた瞬間表示されます。
目立たせたい要素の部分は、positionプロパティで位置を明示的にして
z-indexを有効にし、モーダルより前面に設定します。
※z-indexの値が大きい方が前面に来ます。


/* モーダルのスタイル */
.modaloverlay {
overflow: auto;
position: fixed;
display: none;
top: 0;
left: 0;
z-index: 9999;
width: 100%;
height: 100%;
background-color:#000000;
opacity:0.6;
}


/* ピックアップするコンテンツのボックス */
.pickupblock{
position:relative;
}

/* ボタン */
.bt{
position: relative;
-webkit-appearance: none;
z-index:15000;
border:1px solid #0044ff;
border-radius:10px;
background-color:#0044ff;
color:#ffffff;
padding:8px;
cursor:pointer;
}

/* 説明用テキスト */
#setsumeitext{  
position:absolute;
z-index:15000;
width:200px;
padding:10px;
border-radius:10px;
background-color: #ffffff;color:#222222;
font-weight:bold;
}

Javascript部分：
基本的にモーダルのdisplayのon/offしかしていません。
関数modal_original()を呼び出すときに('on')ならば
表示にします。

また、モーダル要素をクリックすると
display:noneにするイベントと関数を定義しておきます。
クリックするとoverlayclickという関数を起動します。
その中身もdisplay:noneを書いているだけです。
smodalobj.addEventListener('click',overlayclick, false);

<script>
window.onload = function(){
    modal_original('on');
}
//ウインドウを読み込んでから起動

function modal_original(modalswitch){

    const setting_modalid = 'modaloverlay_id';
    //モーダルのIDを指定

    const setting_stext = 'setsumeitext'
    //説明テキスト要素のIDを指定

    var smodalobj = document.getElementById(setting_modalid);

    //引数がonの場合は表示する
    if(modalswitch=='on'){
    document.getElementById(setting_stext).style.display = 'block';
    document.getElementById(setting_modalid).style.display = 'block';
    }

    //イベントを定義
    smodalobj.addEventListener('click',overlayclick, false);

//モーダルをクリックしたら起動し、不要な要素を非表示に
    function overlayclick(){
        document.getElementById(setting_stext).style.display = 'none';
        document.getElementById(setting_modalid).style.display = 'none';
    }

}

</script>

最後に

このデザインは、新規に機能やコンテンツが
増えた時などは良いかなと思います。
自サイトの初心者ユーザー向けなどでも良いですね。

これを手作りするのは探し方が悪かったのかあまりに需要が無いのか
あまり見当たらなかったので活用いただければ嬉しいです。
PC：Chrome/IE/Firefox/Edge/
スマホ：Android10 Chrome/iOS13.5.1 Safari
で動作確認しました。（2020年10月現在）

応用すると連続で案内するタイプも作れます。
（連続チュートリアルとして利用する場合）
ページを平面でなく、レイヤーの重なりだと考え、
それを切り替えていくイメージです。

また、既存サイトに組み込む場合はほかのPOPUP系の
z-indexの位置に注意が必要ですね。