【保存版】JavaScriptで``リンククリック時に確認ダイアログを表示する2つの方法
2024-05-17
JavaScript で <a> リンクをクリック時に確認ダイアログを表示する方法
必要なもの
- HTML ファイル
- JavaScript ファイル
手順
- HTML ファイルで、確認ダイアログを表示したい
<a>リンクを作成します。 - JavaScript ファイルで、
confirm()メソッドを使用して確認ダイアログを表示します。 - ユーザーが "OK" ボタンをクリックした場合、リンク先の URL を開きます。
- ユーザーが "キャンセル" ボタンをクリックした場合、何もしません。
例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ダイアログ</title>
</head>
<body>
<a href="https://www.example.com/" id="myLink">リンク</a>
<script src="script.js"></script>
</body>
</html>
// script.js
document.getElementById('myLink').addEventListener('click', function(event) {
if (!confirm('このリンクを開きますか？')) {
event.preventDefault();
}
});
説明
- HTML コードでは、
id="myLink"という ID を持つ<a>リンクを作成します。 - JavaScript コードでは、
document.getElementById('myLink')を使用してこのリンクを取得します。 addEventListener('click', function(event) {...})を使用して、このリンクがクリックされたときに実行される関数を作成します。- 関数内では、
confirm('このリンクを開きますか？')を使用して確認ダイアログを表示します。 - ユーザーが "OK" ボタンをクリックした場合、
ifステートメント内のコードが実行され、event.preventDefault()を使用してデフォルトのリンク動作がキャンセルされます。
補足
- 確認ダイアログのメッセージは、
confirm()メソッドの引数として渡されます。 event.preventDefault()を使用してデフォルトのリンク動作をキャンセルしないと、ユーザーが "OK" ボタンをクリックしたときにリンク先が開きます。- このコードは、基本的な例です。必要に応じて、メッセージや処理をカスタマイズできます。
サンプルコード：JavaScript で <a> リンクをクリック時に確認ダイアログを表示する
HTML (index.html)
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ダイアログ</title>
</head>
<body>
<a href="https://www.example.com/" id="myLink">リンク</a>
<script src="script.js"></script>
</body>
</html>
JavaScript (script.js)
document.getElementById('myLink').addEventListener('click', function(event) {
if (!confirm('このリンクを開きますか？')) {
event.preventDefault();
}
});
- このコードは、2 つのファイル (
index.htmlとscript.js) で構成されています。 index.htmlファイルは、確認ダイアログを表示したい<a>リンク (id="myLink") を含みます。script.jsファイルは、confirm()メソッドを使用して確認ダイアログを表示する JavaScript コードを含みます。
動作
- ユーザーが
リンクリンクをクリックすると、script.jsファイルの JavaScript コードが実行されます。 confirm()メソッドは、"このリンクを開きますか？" というメッセージを含む確認ダイアログを表示します。- ユーザーが "OK" ボタンをクリックすると、
event.preventDefault()が呼び出され、デフォルトのリンク動作がキャンセルされます。その後、https://www.example.com/にリダイレクトされます。
カスタマイズ
confirm()メソッドの引数に異なるメッセージを指定することで、表示されるメッセージを変更できます。ifステートメント内のコードをカスタマイズすることで、ユーザーが "OK" ボタンをクリックしたときに実行される処理を変更できます。- このコードはあくまで基本的な例です。必要に応じて、独自の要件に合わせて調整してください。
JavaScript で <a> リンクをクリック時に確認ダイアログを表示するその他の方法
Swal.fire は、美しくカスタマイズ可能なポップアップ ダイアログを簡単に作成できる JavaScript ライブラリです。このライブラリを使用して、確認ダイアログを表示することもできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ダイアログ</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@latest/dist/sweetalert2.min.css">
</head>
<body>
<a href="https://www.example.com/" id="myLink">リンク</a>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@latest/dist/sweetalert2.min.js"></script>
<script>
document.getElementById('myLink').addEventListener('click', function(event) {
event.preventDefault();
Swal.fire({
title: '確認',
text: 'このリンクを開きますか？',
icon: 'warning',
showCancelButton: true,
confirmButtonColor: '#3085d6',
cancelButtonColor: '#d33',
confirmButtonText: 'はい',
cancelButtonText: 'キャンセル'
}).then((result) => {
if (result.isConfirmed) {
window.location.href = 'https://www.example.com/';
}
});
});
</script>
</body>
</html>
- この例では、Swal.fire を使用して確認ダイアログを作成します。
- ダイアログには、タイトル、メッセージ、警告アイコン、"はい" ボタンと "キャンセル" ボタンが表示されます。
- ユーザーが "はい" ボタンをクリックすると、
window.location.hrefを使用してhttps://www.example.com/にリダイレクトされます。
利点
- Swal.fire は、高度なカスタマイズオプションを提供します。
- ボタンのテキスト、色、アイコンなどを変更できます。
- アニメーションやその他の効果を追加できます。
欠点
- Swal.fire は、
confirm()メソッドよりも複雑です。 - 追加のライブラリをプロジェクトに含める必要があります。
カスタムダイアログを作成する
HTML、CSS、JavaScript を使用して、独自のカスタム確認ダイアログを作成することもできます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>確認ダイアログ</title>
<style>
#dialog {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: white;
border: 1px solid #ccc;
padding: 20px;
z-index: 1000;
}
#dialog h3 {
margin: 0;
}
#dialog p {
margin-bottom: 10px;
}
#dialog button {
padding: 5px 10px;
background-color: #3085d6;
color: white;
border: none;
cursor: pointer;
}
#dialog button:hover {
background-color: #2877b0;
}
#dialog #cancel-button {
background-color: #d33;
}
#dialog #cancel-button:hover {
background-color: #b72130;
}
</style>
</head>
<body>
<a href="https://www.example.com/" id="myLink">リンク</a>
<div id="dialog">
<h3>確認</h3>
<p>このリンクを開きますか？</p>
<button id="ok-button">はい</button>
<button id="cancel-button">キャンセル</
javascript html dom-events
