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

JavaScriptでアラートボックスのスタイルを変更するには？jQueryを使ったカスタムダイアログの実装方法

標準のアラートボックス（alert()）は、ブラウザが提供するネイティブなダイアログのため、JavaScriptやCSSではスタイルを変更できません。見た目を自由にカスタマイズしたい場合は、HTML・CSS・JavaScriptを組み合わせて独自のカスタムアラートボックスを作成する必要があります。

以下の例では、JavaScriptライブラリ「jQuery」を使用して、デザインを自由に変更できるカスタムアラートボックスを実装しています。

実装例

<!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: #514E61;
           color: #FFFFFF;
           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>

コードのポイント

  • functionAlert() 関数は、表示したいメッセージと、OKボタン押下時に実行するコールバック関数を引数として受け取ります。
  • #confirm は初期状態で display: none; により非表示になっており、関数が呼び出されたタイミングで show() によって画面中央に表示されます。
  • 背景色・文字色・ボタンの角丸など、すべてCSSで指定しているため、サイトのデザインに合わせて自由にアラートの見た目を調整できます。

このように、標準の alert() の代わりに自作のダイアログを用意することで、デザイン性の高いアラートボックスを簡単に実現できます。

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

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

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

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