JavaScriptの.preventDefault()でaタグのリンククリックで離脱防止のモーダルを出してOKでページ遷移

2023年4月13日 7分

今回は、BtoBの申し込みフォーム・資料ダウンロードフォームでよく見る「離脱防止」で表示されるモーダルをJavaScriptで作ってみます。

関連記事モーダルの基本的な使い方とデザイン

かかかず

上記は関連記事です。しかも、クリックすると早速モーダルが表示されます笑

モーダルは、強制力が強くユーザーにストレスを与える可能性のあるUIですが、その辺の特徴を踏まえ是非最後までご覧いただけると嬉しいです。

.preventDefault()
離脱防止のモーダルを出すサンプル
実装の手順と方法
ざっくりとしたコードの解説
さいごに

.preventDefault()

JavaScriptの preventDefault() は、デフォルトの動作をキャンセルするメソッドです。

// 書き方
event.preventDefault();

// 書き方の例
document.querySelector("#id-checkbox").addEventListener("click", function(event) {
         document.getElementById("output-box").innerHTML += " <code>preventDefault()</code> がチェックさせません<br>";
         event.preventDefault();
}, false);

MDNさんの記事を引用させていただくと、以下の通りです。

preventDefault() は Eventインターフェイスのメソッドで、ユーザーエージェントに、このイベントが明示的に処理されない場合に、その既定のアクションを通常どおりに行うべきではないことを伝えます。
mdn web docs より

かかかず

わかりやすい説明で、いつもありがとうございます。

この記事では、preventDefault()でイベントをキャンセルし、リンク先への遷移を行う前にモーダルを出すような仕組みです。

離脱防止のモーダルを出すサンプル

早速、サンプルです。

以下の「Google.comに移動」をクリックすると「このページを離れてもよろしいですか？」のモーダルが表示され、OKを選択すると、Googleに移動します。

Google.comに移動

また、この記事の全ての a タグのリンクにモーダルが表示されるので、「Google.comに移動」リンク以外もクリックしてみてください。

かかかず

全ての a タグにモーダルで反応するスニペットです。

実装の手順と方法

コードの解説の前に、ざっくりとした実装の手順と方法について解説します。

HTMLを記述

はじめに、HTMLを記述します。場所は、ページ内のどこに記載しても大丈夫です。

コードを表示

<div id="modal" class="modal">
  <div class="modal-content">
    <p>このページを離れてもよろしいですか？</p>
    <div class="modal--btn__block">
      <button id="cancel">キャンセル</button>
      <button id="ok">OK</button>
    </div>
  </div>
</div>

JavaScriptを記述

次に、JavaScriptのコードをページに記述します。

コードは <body>〜</body>で、</body> の閉じタグ（クロージングタグ）の前に記述しましょう。

コードを表示

// ロードが完了したらイベント開始
window.addEventListener('load', (event) => {
// モーダルやボタンの定義
const modal = document.getElementById('modal');
const okButton = document.getElementById('ok');
const cancelButton = document.getElementById('cancel');
const links = document.querySelectorAll('a');
let targetHref;

// モーダル表示の関数定義
function showModal(event) {
  // イベントに対するデフォルトの動作を止める
  event.preventDefault();
  targetHref = event.currentTarget.href;
  // モーダルをblockに変えて表示
  modal.style.display = 'block';
  }

// モーダル非表示の関数定義
function hideModal() {
  modal.style.display = 'none';
  }

// OKボタンがクリックされたら
okButton.addEventListener('click', () => {
  window.location.href = targetHref;
});

// キャンセルボタンがクリックされたら
cancelButton.addEventListener('click', hideModal);
  modal.addEventListener('click', (event) => {
    if (event.target === modal) {
    hideModal();
    }
  });

  links.forEach(link => {
    link.addEventListener('click', showModal);
});
});

CSSを記述

最後にCSSを記述して、デザインを整えます。

コードを表示

.modal {
   display: none;
   position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fff;
    padding: 30px 35px;
    width: 80%;
    max-width: 480px;
    position: relative;
    margin: 300px auto;
    filter: drop-shadow(0px 2px 6px #777);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.modal-content p {
    margin: 0;
}
.modal--btn__block {
    display: flex;
    justify-content: end;
    gap: 15px;
}
.modal--btn__block button {
    padding: 4px 25px;
    border: solid 1px #ddd;
    border-radius: 3px;
    font-size: 1rem;
}
.modal--btn__block button:hover {
    opacity: 0.6;
}
button#ok {
    background: #f0db40;
}

かかかず

これで完成です！

ざっくりとしたコードの解説

コードは、HTML・JavaScript・CSSの3種です。順に解説していきます。

HTML

HTMLで、ページ離脱時の確認用モーダルウィンドウをしています。

「modal」のid名を持つ要素の中に、モーダルでこのページを離れてもよろしいですか？」というテキストが表示され、キャンセルとOKの2つのボタンが配置されています。

<div id="modal" class="modal">
  <div class="modal-content">
    <p>このページを離れてもよろしいですか？</p>
    <div class="modal--btn__block">
      <button id="cancel">キャンセル</button>
      <button id="ok">OK</button>
    </div>
  </div>
</div>

かかかず

このHTMLのモーダルを、JavaScriptで表示・非表示を切り替える仕組みです。

ので、モーダルに表示するテキストやボタンを変更したい場合は、HTMLをいじりましょう。

JavaScript

JavaScriptは、addEventListener の load（ページ全体が、スタイルシートや画像などのすべての依存するリソースを含めて読み込まれたときに発生）するタイミングでイベントをスタートさせます。

イベントがスタートしたら、ページ離脱時にモーダルを表示し、ユーザーがOKボタンをクリックした場合にページ遷移を行います。また、キャンセルボタンでモーダルを閉じることもできます。

// ロードが完了したらイベント開始
window.addEventListener('load', (event) => {
// モーダルやボタンの定義
const modal = document.getElementById('modal');
const okButton = document.getElementById('ok');
const cancelButton = document.getElementById('cancel');
const links = document.querySelectorAll('a');
let targetHref;

// モーダル表示の関数定義
function showModal(event) {
  // イベントに対するデフォルトの動作を止める
  event.preventDefault();
  targetHref = event.currentTarget.href;
  // モーダルをblockに変えて表示
  modal.style.display = 'block';
  }

// モーダル非表示の関数定義
function hideModal() {
  modal.style.display = 'none';
  }

// OKボタンがクリックされたら
okButton.addEventListener('click', () => {
  window.location.href = targetHref;
});

// キャンセルボタンがクリックされたら
cancelButton.addEventListener('click', hideModal);
  modal.addEventListener('click', (event) => {
    if (event.target === modal) {
    hideModal();
    }
  });

  links.forEach(link => {
    link.addEventListener('click', showModal);
});
});

各コードの役割や補足は、上記のコメントアウト部分と合わせてご覧ください。

CSS

CSSは、モーダルのサイズやレイアウトを整える程度で、コード量も少なめです。

.modal {
   display: none;
   position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
    background-color: #fff;
    padding: 30px 35px;
    width: 80%;
    max-width: 480px;
    position: relative;
    margin: 300px auto;
    filter: drop-shadow(0px 2px 6px #777);
    border-radius: 2px;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.modal-content p {
    margin: 0;
}
.modal--btn__block {
    display: flex;
    justify-content: end;
    gap: 15px;
}
.modal--btn__block button {
    padding: 4px 25px;
    border: solid 1px #ddd;
    border-radius: 3px;
    font-size: 1rem;
}
.modal--btn__block button:hover {
    opacity: 0.6;
}
button#ok {
    background: #f0db40;
}

ボタンの色など、モーダルの見た目に関するものはCSSをカスタマイズしましょう。