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

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

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

ブラウザ標準の alert() は表示位置がブラウザ側で制御されているため、CSSで中央に移動させることはできません。画面中央にアラートボックスを表示したい場合は、カスタムアラートボックスを自作し、CSSでスタイリングと配置を自由に行う必要があります。

実装のポイント

カスタムアラートボックスを中央付近に配置するには、CSSの「top」プロパティと「left」プロパティを使用します。通常は両方とも「50%」に設定しますが、この例ではボックス内の下部にOKボタンが配置されているため、見た目のバランスを考慮して「40%」に設定しています。

コード例

<!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: 40%;
        top: 40%;
        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">This is a warning message.</div><br>
      <button class="yes">OK</button>
    </div>
    <input type="button" value="Click Me" onclick="functionAlert();" />
  </body>
</html>

補足：正確な中央配置にはtransformが便利

ボックスを厳密に画面の中心に配置したい場合は、transformを併用する方法がおすすめです。

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

この手法では、ボックス自身の幅や高さに左右されることなく、常に正確に中央へ配置されます。要素のサイズが可変の場合にも対応できるため、実務ではこちらの方法がよく使われています。また、FlexboxやCSS Gridを活用したレイアウトでも同様の中央寄せが可能です。

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

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

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

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