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

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

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

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

サンプルコード

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を記述するときの注意

propsのscenario、phase、pattern、stepには、JavaScriptを記述しているシナリオ、フェーズ、パターン、ステップのIDを指定してください。

上記のサンプルコードは「モーダルエリアがクリックされたらscenario1-phase1-pattern1のstep_01 を閉じる（［×］ボタンクリックと同じ）」という挙動になります。

サンプルコード

📘JavaScriptを記述するときの注意

📘
JavaScriptを記述するときの注意