モーダル設定時、周辺エリアのクリックでポップアップを閉じる

モーダルの設定を有効にしている場合、ポップアップの周辺エリアをクリック(タップ)したときにポップアップを閉じるようにするカスタマイズについて説明します。

Sprocketでは、管理画面から[モーダルの設定]を行えます。モーダルの設定を有効にすると、ポップアップ以外のエリアがグレーのモーダル表示になり、ユーザーの注意を引いてポップアップの操作を促すことが可能です。

[ポップアップの編集]内にある[モーダルウィンドウにする]にチェックを付けるとモーダルの設定を行える[ポップアップの編集]内にある[モーダルウィンドウにする]にチェックを付けるとモーダルの設定を行える

[ポップアップの編集]内にある[モーダルウィンドウにする]にチェックを付けるとモーダルの設定を行える

モーダル表示時、通常はポップアップ以外のエリアをクリックすることはできず、ポップアップを閉じるには[×]か[閉じる]ボタンをクリックする必要があります。
しかし、後述するサンプルコードをステップ内に記述すると、ポップアップ外の周辺エリアをクリックすることで簡単にポップアップを閉じられるようになります。
[×]ボタンが小さくて押しづらいと感じるときや、ポップアップには気付いてほしいがユーザーの操作を妨げたくないときなどに有効です。

通常は、ポップアップ以外のエリアは操作できない通常は、ポップアップ以外のエリアは操作できない

通常は、ポップアップ以外のエリアは操作できない

サンプルコード

Sprocketの管理画面で、ステップ内のHTMLに下記のJavaScriptを記述します。

<script>
(function(){
  var props = {
    scenario: 'scenario1',
    phase: 'phase1',
    pattern: 'pattern1',
    step: 'step_01'
  };
  
  var modalClickToEnd = function(props) {
    if(SPSDK.$('.spg-tour02-modal').length === 0){
      return;
    }
    SPSDK.$('.spg-tour02-modal').off('click');
    SPSDK.$('.spg-tour02-modal').on('click', function() {
      SPSDK.$(
        '[data-scenario='+ props.scenario +']' + 
        '[data-phase='+ props.phase +']' +
        '[data-pattern='+ props.pattern +']' +
        '[data-step='+ props.step +']' +
        ' .spg-tour02-end'
      ).trigger('click');
    });
  };
  
  modalClickToEnd(props);
})();
</script>

📘

JavaScriptを記述するときの注意

  • propsscenariophasepatternstepには、JavaScriptを記述しているシナリオ、フェーズ、パターン、ステップのIDを指定してください。
  • 上記のサンプルコードは「モーダルエリアがクリックされたらscenario1-phase1-pattern1のstep_01 を閉じる([×]ボタンクリックと同じ)」という挙動になります。