UI設計したり、ウェブシステムを開発したりします。 

SQL見るだけクエリ#307 JavaScriptを使用した確認ポップアップ画面を自由にスタイル

記入日:2023-11-11 編集日:2023-11-11

JavaScriptを使用した確認ポップアップ画面を自由にスタイルに関して解説してみようと思います。

この記事を読むと(約5分)
JavaScriptを使用した確認ポップアップ画面を自由にスタイルに関してイメージできます。

JavaScriptを使用した確認ポップアップ画面を自由にスタイル

ブラウザの標準の window.confirm() メソッドは、外見やスタイルを直接変更することが難しい制約があります。 このメソッドが表示するポップアップは、ブラウザやオペレーティングシステムによって異なる外観を持ち、ユーザーインターフェース(UI)のスタイルを直接制御する手段が提供されていません。

しかし、完全にカスタムでスタイルを設定したい場合は、独自のモーダル(ポップアップ)を実装することが一般的です。 これを行うためには、HTML、CSS、およびJavaScriptを使用してモーダルを作成し、スタイルを設定する必要があります。

以下は、基本的なカスタムモーダルの例です。 この例では、CSSを使用してスタイルを設定し、JavaScriptを使用してモーダルの表示/非表示を切り替えています。

<!DOCTYPE html>
<html lang="ja">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>カスタムモーダルの例</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 100px;
    }

    /* モーダルのスタイル */
    #modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #fff;
      padding: 20px;
      border: 1px solid #ccc;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      z-index: 1000;
    }

    /* オーバーレイのスタイル */
    #overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.5);
      z-index: 900;
    }
  </style>
</head>
<body>

<!-- ボタン -->
<button onclick="showCustomModal()">クリックして確認</button>

<!-- カスタムモーダル -->
<div id="overlay"></div>
<div id="modal">
  <p>本当にこの操作を行いますか?</p>
  <button onclick="performAction()">はい</button>
  <button onclick="hideCustomModal()">いいえ</button>
</div>

<!-- JavaScriptのコード -->
<script>
  function showCustomModal() {
    document.getElementById('overlay').style.display = 'block';
    document.getElementById('modal').style.display = 'block';
  }

  function hideCustomModal() {
    document.getElementById('overlay').style.display = 'none';
    document.getElementById('modal').style.display = 'none';
  }

  function performAction() {
    // 「はい」が選択された場合の処理
    alert("カスタム処理が完了しました。");
    hideCustomModal();
  }
</script>

</body>
</html>

この例では、#modalがモーダルの外観を、#overlayがオーバーレイの外観を定義しています。 ボタンをクリックすると、カスタムモーダルが表示され、ユーザーが「はい」または「いいえ」を選択すると、 それに基づいた処理が行われます。このようにして、外観やスタイルを自由に設定できるカスタムモーダルを実装できます。

SQLの使いどころ

サイトに大量の情報を掲載することは、ユーザーにとってとても便利なことです。しかし、情報が多すぎると、目的の情報を見つけるのが困難になります。そのため、SQLを使用することで、情報を効率的に管理することができます。

SQLを使用することで、データベース内の情報を検索したり、フィルタリングしたりすることができます。これにより、ユーザーは目的の情報をスムーズかつ簡単に見つけることができます。

また、SQLを使用することで、データを集計したり、統合したりすることもできます。これにより、ユーザーはさまざまな視点から情報を分析することができます。つまり、サイトに多くの情報を掲載することが重要である一方で、その情報を効率的かつ簡単に管理することが求められる場合には、SQLが不可欠であるといえます。

KK

機械工学を専攻。工業デザイナーとして、国内及び海外の自動車・搬送ラインの設計などに従事した後、2003年にウェブシステム会社を設立。UI設計やウェブシステムの開発、DX化のディレクションなどを行っています。