JavaScript
 Computer >> コンピューター >  >> プログラミング >> JavaScript

JavaScriptとjQueryでカスタムアラートボックスを作成する方法【実装例つき】

ブラウザ標準の alert() は手軽に使える一方、デザインのカスタマイズが一切できず、サイトの雰囲気に合わないことも少なくありません。そこで本記事では、jQuery と CSS を組み合わせて、自由にデザインできるカスタムアラートボックスを実装する方法を解説します。

カスタムアラートボックスの仕組み

基本的な考え方はシンプルです。あらかじめ HTML 内にアラート用の <div> 要素を配置し、CSS の display: none; で非表示にしておきます。ボタンがクリックされたタイミングで jQuery の show() / hide() を使って表示・非表示を切り替えることで、標準のアラートボックスのような振る舞いを実現します。

実装コード（サンプル）

以下のコードはそのままコピーして動作を確認できます。メッセージ内容や OK ボタンのラベルは引数として渡せるため、さまざまな場面で再利用可能です。

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
function functionAlert(msg, myYes) {
var confirmBox = $("#confirm");
confirmBox.find(".message").text(msg);
confirmBox.find(".yes").unbind().click(function() {
confirmBox.hide();
});
confirmBox.find(".yes").click(myYes);
confirmBox.show();
}
</script>
<style>
#confirm {
display: none;
background-color: #91FF00;
border: 1px solid #aaa;
position: fixed;
width: 250px;
left: 50%;
margin-left: -100px;
padding: 6px 8px 8px;
box-sizing: border-box;
text-align: center;
}
#confirm button {
background-color: #48E5DA;
display: inline-block;
border-radius: 5px;
border: 1px solid #aaa;
padding: 5px;
text-align: center;
width: 80px;
cursor: pointer;
}
#confirm .message {
text-align: left;
}
</style>
</head>
<body>
<div id = "confirm">
<div class = "message">This is a warning message.</div>
<button class = "yes">OK</button>
</div>
<input type = "button" value = "Click Me" onclick = "functionAlert();" />
</body>
</html>

コードのポイント解説

1. メッセージとコールバックを引数で受け取る

functionAlert(msg, myYes) のように、表示したいメッセージと「OK ボタン押下時に実行する処理」を引数として渡せる設計にしています。これにより、削除確認や完了通知など、用途に応じて柔軟に使い回せます。

2. イベントの二重登録を防ぐ

unbind() を呼び出してからクリックイベントを登録している点が重要です。これがないと、アラートを複数回呼び出した際に同じ処理が重複して実行されてしまいます。

3. CSS で画面中央に固定表示

position: fixed; と left: 50%;、ネガティブマージンを組み合わせることで、スクロール位置に関係なく画面中央にアラートを表示しています。背景色や角丸、幅などは CSS を編集するだけで自由に変更できます。

カスタマイズのヒント

  • フェードイン・アウト： show() / hide() を fadeIn() / fadeOut() に置き換えると、滑らかな演出になります。
  • オーバーレイの追加： 背景を半透明の黒で覆う要素を追加すると、モーダルらしい見た目になり、背後の操作も防止できます。
  • キャンセルボタンの追加： 「OK」だけでなく「キャンセル」ボタンを設ければ、confirm ダイアログ風の UI も簡単に作れます。

このように、jQuery と CSS を使えば標準の alert() よりはるかに表現力豊かなアラートボックスを実装できます。ぜひ自分のサイトのデザインに合わせてカスタマイズしてみてください。

  1. JavaScriptのアラートボックス（alert）のタイトルは変更できる？カスタムモーダルで実現する方法

    結論から言うと、セキュリティ上の制約により、JavaScriptの標準的なalert()メソッドで表示されるアラートボックスのタイトルを編集することはできません。なぜタイトルが変更できないのかブラウザ標準のアラートボックスは、悪意あるサイトがOSやブラウザ自体のダイアログに偽装してユーザーを騙すことを防ぐため、ブラウザ側で厳しく管理されています。そのため、タイトル部分には自動的にドメイン名や「このページから」といった情報が表示され、開発者が自由に書き換えることはできない仕組みになっています。解決策：カスタムモーダルダイアログを使うすべてのWebブラウザで一貫した見た目のアラートボックスを実現し

  2. JavaScriptで印刷ダイアログを表示する方法｜window.print()の使い方を解説

    JavaScriptで印刷ダイアログボックスを表示するには、print()メソッドを使用します。このメソッドを呼び出すと、ブラウザ標準の印刷ダイアログがポップアップ表示され、どのプリンターを選択するかといった印刷オプションを簡単に設定できます。 印刷ダイアログの表示イメージ window.print()を実行すると、以下のような印刷ダイアログが表示されます。 サンプルコード 次のコードを実行すると、ボタンをクリックするだけでページを印刷できることを確認できます。 <!DOCTYPE html> <html>    <body> &nbs