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

JavaScriptのアラートボックスを画面中央に表示する方法

JavaScript標準のalert()メソッドで表示されるアラートボックスは、ブラウザ側が自動的に描画するため、その位置を自由に変更することができません。アラートボックスを画面中央に配置したい場合は、独自のカスタムアラートボックスを作成し、CSSでスタイリングしたうえで中央に配置する必要があります。

カスタムアラートボックスを中央に配置する手順

中央配置には、CSSの「top」と「left」プロパティを使用します。どちらも50%に設定すれば画面中央に近づきますが、ボックス内の下部に配置したボタンまで考慮すると、見た目のバランスが崩れることがあります。そのような場合は40%程度に調整すると、より自然な位置に収まります。

サンプルコード

以下は、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: #F3F5F6;
            color: #000000;
            border: 1px solid #aaa;
            position: fixed;
            width: 300px;
            height: 100px;
            left: 50%;
            margin-left: -100px;
            padding: 10px 20px 10px;
            box-sizing: border-box;
            text-align: center;
         }
         #confirm button {
            background-color: #FFFFFF;
            display: inline-block;
            border-radius: 12px;
            border: 4px solid #aaa;
            padding: 5px;
            text-align: center;
            width: 60px;
            cursor: pointer;
         }
         #confirm .message {
            text-align: left;
         }
      </style>
   </head>
   <body>
      <div id="confirm">
         <div class="message">これは警告メッセージです。</div>
            <button class="yes">OK</button>
         </div>
      <input type="button" value="クリックしてください" onclick="functionAlert();" />
   </body>
</html>

コードのポイント解説

  • position: fixed; … ボックスを画面上の固定位置に配置します。ページをスクロールしても位置が変わりません。
  • left: 50%; margin-left: -100px; … ボックスの左端を画面幅の中央に合わせたうえで、半分ほど左へずらすことで水平方向の中央揃えを実現しています。
  • display: none と show() … 初期状態では非表示にしておき、jQueryのshow()で表示を切り替えています。

transformを使ったより正確な中央配置（推奨）

marginでの微調整はボックスのサイズが変わると崩れてしまいます。transform: translate(-50%, -50%)を使えば、サイズに関係なく常に正確に中央揃えできます。

#confirm {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

この方法なら、縦横どちらもボックスの中心を基準に配置されるため、レスポンシブ対応にも強く、現在のWeb開発ではこちらが主流となっています。

  1. JavaScriptでアラートボックスを作成する方法

    アラートボックスとは？ アラートボックス（Alert Box）とは、クリック、スクロール、テキスト入力などのユーザー操作に反応してポップアップ表示される小さなウィンドウのことです。主にユーザーへ問題や注意点を警告する目的で使われますが、単に情報をお知らせする用途でも広く活用されています。 よくある使用例として、フォームの送信ボタンをクリックしたものの、必須項目の入力を忘れてしまったケースが挙げられます。この場合、アラートボックスが自動的に表示され、問題の内容をユーザーに分かりやすく伝えることができます。 アラートボックスの作成方法 それでは、上のスクリーンショットと同じアラートボックスを実際

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

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