入力内容確認モーダルウインドウの作り方【HTML/CSS/JavaScript・サンプルコード付き】

テキスト・表示ボタン・サイズ・余白・角丸・背景色・文字色・影などを設定して、HTML・CSS・JavaScriptを自動生成できます。

入力内容確認モーダルウインドウの作り方

入力内容確認モーダルウインドウを作る方法を紹介します。このサンプルでは、HTML・CSS・JavaScriptを使用し、フォームに入力した内容を送信前に確認できる仕組みを作成します。フォームには、お名前・メールアドレス・お問い合わせ内容の3項目を用意しており、「入力内容を確認」ボタンをクリックすると、現在の入力内容がモーダルウインドウに表示されます。

お問い合わせフォームや資料請求フォーム、申し込みフォームなど、送信前に入力内容を確認してもらいたい場面に適しています。3項目すべてを必須入力とし、メールアドレスにはブラウザ標準の形式チェックを設定しています。確認画面には「戻る」と「送信する」の2つのボタンを用意しており、「戻る」をクリックすると入力内容を保持したままフォームへ戻れます。入力内容を修正した場合は、再度「入力内容を確認」をクリックすることで、変更後の内容を確認できます。

確認画面で「送信する」をクリックすると、HTMLのaction属性とmethod=”post”で指定した送信先URLへ、お名前・メールアドレス・お問い合わせ内容の3項目をPOST送信できます。送信先での受信処理やメール送信、データ保存などは、利用者自身で用意する必要があります。また、CSSではフォームやモーダルの横幅、余白、背景色、角丸、入力欄、ボタンのデザインなどを自由に調整できます。スマートフォン・タブレット・PCでも利用しやすいレスポンシブ対応の構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

入力内容確認モーダル

フォームの入力内容を、送信前にモーダルウインドウで確認できます。

フォームには入力例が設定されており、自由に修正できます。すべての項目が必須入力です。「入力内容を確認」をクリックすると、モーダルウインドウに入力内容が表示されます。「戻る」でフォームへ戻り、「送信する」でデモ用メッセージが表示されます。実際の送信は行われません。

コードをコピーして使おう！

<!DOCTYPE html>
<html lang="ja">

<head>

  <!-- 文字コード -->
  <meta charset="UTF-8">

  <!-- スマートフォン対応 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- ページタイトル -->
  <title>入力内容確認モーダルウインドウ</title>

  <!-- CSSファイル -->
  <link rel="stylesheet" href="style.css">

</head>

<body>

  <!--
    入力フォームの送信先設定

    1. POST送信に対応した受信先を利用者自身で用意してください。
       例：PHPで作成した受信処理やフォーム受付サービス。

    2. action="YOUR_POST_URL" のYOUR_POST_URLを、
       実際の送信先URLへ置き換えてください。

    3. method="post"はそのまま使用してください。

    4. 送信先では次の3項目を受け取れるようにしてください。
       name    ：お名前
       email   ：メールアドレス
       message ：お問い合わせ内容

    このサンプルには受信処理・メール送信・データ保存・
    サーバー側の入力検証やセキュリティ対策は含まれていません。
    これらは送信先のシステムで用意してください。
  -->

  <!-- 入力フォーム -->
  <form class="confirm-input-modal_form" id="confirm-input-modal-form" action="YOUR_POST_URL" method="post">

    <!-- お名前入力欄 -->
    <div class="confirm-input-modal_field">

      <!-- お名前ラベルと必須表示 -->
      <label class="confirm-input-modal_label" for="confirm-input-modal-name">
        お名前
        <span class="confirm-input-modal_required">必須</span>
      </label>

      <!--
        お名前を入力するテキストフィールド
        name="name"で送信します。
        value属性は初期入力値です。
        requiredで未入力を防止します。
      -->
      <input
        class="confirm-input-modal_input"
        id="confirm-input-modal-name"
        name="name"
        type="text"
        autocomplete="name"
        value="山田 太郎"
        required>

    </div>

    <!-- メールアドレス入力欄 -->
    <div class="confirm-input-modal_field">

      <!-- メールアドレスラベルと必須表示 -->
      <label class="confirm-input-modal_label" for="confirm-input-modal-email">
        メールアドレス
        <span class="confirm-input-modal_required">必須</span>
      </label>

      <!--
        メールアドレスを入力するテキストフィールド
        name="email"で送信します。
        value属性は初期入力値です。
        type="email"で形式をチェックします。
        requiredで未入力を防止します。
      -->
      <input
        class="confirm-input-modal_input"
        id="confirm-input-modal-email"
        name="email"
        type="email"
        autocomplete="email"
        value="sample@example.com"
        required>

    </div>

    <!-- お問い合わせ内容入力欄 -->
    <div class="confirm-input-modal_field">

      <!-- お問い合わせ内容ラベルと必須表示 -->
      <label class="confirm-input-modal_label" for="confirm-input-modal-message">
        お問い合わせ内容
        <span class="confirm-input-modal_required">必須</span>
      </label>

      <!--
        お問い合わせ内容を入力するテキストエリア
        name="message"で送信します。
        開始タグと終了タグの間の文章が初期入力値です。
        requiredで未入力を防止します。
      -->
      <textarea
        class="confirm-input-modal_textarea"
        id="confirm-input-modal-message"
        name="message"
        required>資料について詳しく知りたいです。</textarea>

    </div>

    <!--
      入力内容を確認するボタン
      必須入力とメールアドレスの形式チェック後、
      JavaScriptで確認モーダルを表示します。
    -->
    <button class="confirm-input-modal_submit" type="submit">
      入力内容を確認
    </button>

  </form>

  <!-- 確認モーダル本体 -->
  <div class="confirm-input-modal_modal" id="confirm-input-modal-modal" role="dialog" aria-modal="true" aria-labelledby="confirm-input-modal-title">

    <!-- 確認画面タイトル -->
    <div class="confirm-input-modal_confirm-title" id="confirm-input-modal-title">
      入力内容確認
    </div>

    <!-- 確認画面説明文 -->
    <p class="confirm-input-modal_confirm-text">
      以下の内容でよろしければ「送信する」をクリックしてください。
    </p>

    <!-- お名前の確認表示 -->
    <div class="confirm-input-modal_confirm-item">

      <span class="confirm-input-modal_confirm-label">
        お名前
      </span>

      <span id="confirm-input-modal-view-name"></span>

    </div>

    <!-- メールアドレスの確認表示 -->
    <div class="confirm-input-modal_confirm-item">

      <span class="confirm-input-modal_confirm-label">
        メールアドレス
      </span>

      <span id="confirm-input-modal-view-email"></span>

    </div>

    <!-- お問い合わせ内容の確認表示 -->
    <div class="confirm-input-modal_confirm-item">

      <span class="confirm-input-modal_confirm-label">
        お問い合わせ内容
      </span>

      <span class="confirm-input-modal_confirm-message" id="confirm-input-modal-view-message"></span>

    </div>

    <!-- 操作ボタン -->
    <div class="confirm-input-modal_buttons">

      <!-- 入力フォームへ戻るボタン -->
      <button class="confirm-input-modal_back" id="confirm-input-modal-back" type="button">
        戻る
      </button>

      <!-- 確認済みの内容をPOST送信するボタン -->
      <button class="confirm-input-modal_send" id="confirm-input-modal-send" type="button">
        送信する
      </button>

    </div>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>

</html>

/* =========================================
   入力フォーム
========================================= */

/* 入力フォーム全体 */
.confirm-input-modal_form{
  display:grid; /* 入力項目を縦方向に配置 */
  gap:22px; /* 項目同士の間隔。値を大きくすると間隔が広がる */
  max-width:520px; /* 最大横幅。値を大きくするとフォームが横に広がる */
  margin:0 auto; /* フォームを中央配置 */
  text-align:left; /* フォーム内の文字を左揃え */
}

/* 入力項目 */
.confirm-input-modal_field{
  display:grid; /* ラベルと入力欄を縦方向に配置 */
  gap:8px; /* ラベルと入力欄の間隔 */
}

/* 入力項目のラベル */
.confirm-input-modal_label{
  color:#1f2937; /* ラベルの文字色 */
  font-size:15px; /* ラベルの文字サイズ */
  font-weight:700; /* ラベルを太字にする */
}

/* 必須表示 */
.confirm-input-modal_required{
  margin-left:6px; /* ラベルと必須表示の間隔 */
  color:#dc2626; /* 必須表示の文字色 */
  font-size:13px; /* 必須表示の文字サイズ */
}

/* テキスト入力欄・テキストエリア */
.confirm-input-modal_input,
.confirm-input-modal_textarea{
  width:100%; /* 入力欄の横幅を親要素に合わせる */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border:1px solid #cbd5e1; /* 枠線の太さ・種類・色 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* 入力欄の背景色 */
  color:#111827; /* 入力文字の色 */
  font:inherit; /* 親要素のフォントを継承 */
  box-sizing:border-box; /* paddingとborderを横幅に含める */
}

/* 入力欄のフォーカス状態 */
.confirm-input-modal_input:focus,
.confirm-input-modal_textarea:focus{
  border-color:#2563eb; /* フォーカス時の枠線色 */
  outline:3px solid rgba(37,99,235,.15); /* 外側の強調枠。3pxが太さ */
}

/* お問い合わせ内容入力欄 */
.confirm-input-modal_textarea{
  min-height:120px; /* 最小高さ。値を大きくすると入力欄が高くなる */
  resize:vertical; /* 縦方向のみサイズ変更を許可 */
}

/* 入力内容を確認するボタン */
.confirm-input-modal_submit{
  padding:13px 24px; /* 上下13px・左右24pxの内側余白 */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  background:#2563eb; /* ボタンの背景色 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンを太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}


/* =========================================
   モーダルウインドウ
========================================= */

/* モーダル本体 */
.confirm-input-modal_modal{
  display:none; /* 初期状態では非表示 */
  position:fixed; /* ブラウザ画面を基準に固定 */
  top:50%; /* 上端を画面中央へ配置 */
  left:50%; /* 左端を画面中央へ配置 */
  z-index:9999; /* 表示順。値を大きくすると前面に配置されやすくなる */
  width:calc(100% - 40px); /* 画面左右に合計40pxの余白を確保 */
  max-width:520px; /* 最大横幅。値を大きくするとモーダルが広がる */
  max-height:calc(100vh - 40px); /* 画面の高さから40pxを引いた範囲に収める */
  overflow-y:auto; /* 内容が収まらない場合は縦スクロール */
  padding:28px; /* 内側余白。値を大きくすると内容と外周の間隔が広がる */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#ffffff; /* モーダルの背景色 */
  box-shadow:0 20px 40px rgba(0,0,0,.2); /* 下方向20px・ぼかし40pxの影 */
  font-family:sans-serif; /* モーダル内のフォント */
  box-sizing:border-box; /* paddingを横幅に含める */
  transform:translate(-50%,-50%); /* モーダル自身の横幅・高さの半分を戻して中央配置 */
}

/* モーダル表示状態 */
.confirm-input-modal_modal.is-active{
  display:block; /* モーダル本体を表示 */
}

/* 確認画面タイトル */
.confirm-input-modal_confirm-title{
  margin:0 0 12px; /* 下側12pxの余白 */
  color:#111827; /* タイトルの文字色 */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  text-align:center; /* タイトルを中央揃え */
}

/* 確認画面説明文 */
.confirm-input-modal_confirm-text{
  margin:0 0 28px; /* 下側28pxの余白 */
  color:#4b5563; /* 説明文の文字色 */
  font-size:14px; /* 説明文の文字サイズ */
  line-height:1.8; /* 説明文の行間 */
  text-align:center; /* 説明文を中央揃え */
}


/* =========================================
   入力内容の確認表示
========================================= */

/* 確認項目 */
.confirm-input-modal_confirm-item{
  margin:0 0 18px; /* 下側18pxの余白 */
  padding:12px 14px; /* 上下12px・左右14pxの内側余白 */
  border:1px solid #e5e7eb; /* 枠線の太さ・種類・色 */
  border-radius:8px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 確認項目の背景色 */
  color:#374151; /* 確認内容の文字色 */
  line-height:1.7; /* 確認内容の行間 */
  overflow-wrap:anywhere; /* 長い文字列を折り返す */
}

/* 確認項目名 */
.confirm-input-modal_confirm-label{
  display:block; /* 項目名を独立した行に表示 */
  margin-bottom:6px; /* 項目名と内容の間隔 */
  color:#111827; /* 項目名の文字色 */
  font-size:15px; /* 項目名の文字サイズ */
  font-weight:700; /* 項目名を太字にする */
}

/* お問い合わせ内容の確認表示 */
.confirm-input-modal_confirm-message{
  white-space:pre-wrap; /* 入力された改行を維持 */
}


/* =========================================
   操作ボタン
========================================= */

/* 操作ボタンの配置 */
.confirm-input-modal_buttons{
  display:flex; /* 戻るボタンと送信ボタンを横並びにする */
  justify-content:flex-end; /* ボタンを右側に配置 */
  gap:14px; /* ボタン同士の間隔 */
  margin-top:24px; /* 確認内容との間隔 */
}

/* 戻る・送信ボタン共通 */
.confirm-input-modal_back,
.confirm-input-modal_send{
  min-width:140px; /* ボタンの最小横幅 */
  padding:13px 24px; /* 上下13px・左右24pxの内側余白 */
  border:none; /* 枠線を非表示 */
  border-radius:8px; /* ボタンの角丸 */
  color:#ffffff; /* ボタンの文字色 */
  font-size:16px; /* ボタンの文字サイズ */
  font-weight:700; /* ボタンを太字にする */
  cursor:pointer; /* マウスカーソルをポインターにする */
}

/* 戻るボタン */
.confirm-input-modal_back{
  background:#111827; /* 戻るボタンの背景色 */
}

/* 送信ボタン */
.confirm-input-modal_send{
  background:#2563eb; /* 送信ボタンの背景色 */
}


/* =========================================
   レスポンシブ対応
========================================= */

/* 画面幅640px以下 */
@media (max-width:640px){

  /* モーダル本体 */
  .confirm-input-modal_modal{
    padding:24px 18px; /* 上下24px・左右18pxの内側余白 */
  }

  /* 操作ボタン */
  .confirm-input-modal_buttons{
    gap:10px; /* ボタン同士の間隔を10pxにする */
  }

  /* 戻る・送信ボタン */
  .confirm-input-modal_back,
  .confirm-input-modal_send{
    flex:1; /* 2つのボタンで横幅を均等に分ける */
    min-width:0; /* 狭い画面でもボタンを縮小可能にする */
    padding:13px 12px; /* 上下13px・左右12pxの内側余白 */
  }

}

// =========================================
// 入力フォームとモーダルの取得
// =========================================

// 入力フォームを取得
const confirmInputModalForm =
  document.getElementById("confirm-input-modal-form");

// モーダル本体を取得
const confirmInputModalModal =
  document.getElementById("confirm-input-modal-modal");

// お名前の入力欄を取得
const confirmInputModalName =
  document.getElementById("confirm-input-modal-name");

// メールアドレスの入力欄を取得
const confirmInputModalEmail =
  document.getElementById("confirm-input-modal-email");

// お問い合わせ内容の入力欄を取得
const confirmInputModalMessage =
  document.getElementById("confirm-input-modal-message");

// お名前の確認表示先を取得
const confirmInputModalViewName =
  document.getElementById("confirm-input-modal-view-name");

// メールアドレスの確認表示先を取得
const confirmInputModalViewEmail =
  document.getElementById("confirm-input-modal-view-email");

// お問い合わせ内容の確認表示先を取得
const confirmInputModalViewMessage =
  document.getElementById("confirm-input-modal-view-message");

// 戻るボタンを取得
const confirmInputModalBack =
  document.getElementById("confirm-input-modal-back");

// 送信するボタンを取得
const confirmInputModalSend =
  document.getElementById("confirm-input-modal-send");


// =========================================
// 送信状態の管理
// =========================================

// 確認画面で送信が確定したかを管理
// false：確認画面を表示
// true ：指定URLへPOST送信
let confirmInputModalApproved=false;


// =========================================
// 入力内容の確認
// =========================================

// フォームが送信されるとき
confirmInputModalForm.addEventListener("submit", (event) => {

  // 確認済みの場合はPOST送信を許可する
  if(confirmInputModalApproved){
    return;
  }

  // 初回の送信を停止して確認画面へ進む
  event.preventDefault();

  // 現在のお名前を確認画面に表示
  confirmInputModalViewName.textContent =
    confirmInputModalName.value;

  // 現在のメールアドレスを確認画面に表示
  confirmInputModalViewEmail.textContent =
    confirmInputModalEmail.value;

  // 現在のお問い合わせ内容を確認画面に表示
  confirmInputModalViewMessage.textContent =
    confirmInputModalMessage.value;

  // モーダルを表示
  confirmInputModalModal.classList.add("is-active");

});


// =========================================
// 入力フォームへ戻る
// =========================================

// 戻るボタンをクリックしたとき
confirmInputModalBack.addEventListener("click", () => {

  // モーダルを閉じる
  confirmInputModalModal.classList.remove("is-active");

  // 送信確定状態を解除
  confirmInputModalApproved=false;

  // フォームの入力内容は変更せず保持する

});


// =========================================
// 入力内容のPOST送信
// =========================================

// 送信するボタンをクリックしたとき
confirmInputModalSend.addEventListener("click", () => {

  // 確認済みの送信として扱う
  confirmInputModalApproved=true;

  // HTMLの必須入力・メール形式チェックを再実行し、
  // 問題がなければフォームのsubmitイベントを発生させる
  confirmInputModalForm.requestSubmit();

  // 再チェックで送信が止まった場合に備えて状態を戻す
  confirmInputModalApproved=false;

});

// 実際の送信先はHTMLのaction属性で指定します。
// method="post"によりname・email・messageがPOST送信されます。
// 受信処理・メール送信・データ保存は送信先で行ってください。

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

Q ダウンロードしたけど、これをネット上で動かすにはどうするの？

Googleアカウントがあれば、InfinityFreeで無料サーバーを作成して、ダウンロードしたサンプルをネット上で動かせます。

InfinityFreeを初めて利用する場合は①から、すでにサーバーを作成している場合は②へ進んでください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは、お名前・メールアドレス・お問い合わせ内容の入力フォームと、送信前に入力内容を確認するモーダルウインドウを作成します。CSSでは入力欄やモーダルのデザインを設定し、JavaScriptでは入力内容の確認表示、モーダルの開閉、POST送信を制御します。オーバーレイは使用せず、モーダル本体だけを画面中央に表示する構成です。

sample/
├── index.html
├── style.css
└── script.js

各ファイルの役割
index.htmlは、3項目の入力フォームと確認モーダルを構成するファイルです。すべての項目に必須入力を設定し、メールアドレスには形式チェックを設定しています。また、action属性でPOST送信先のURLを指定できます。

style.cssは、入力フォームとモーダルウインドウのデザインを設定するファイルです。フォームの横幅、入力欄の余白、枠線、背景色、モーダルの表示位置、角丸、影、ボタンの色や配置などを変更できます。

script.jsは、入力内容の確認表示とモーダルの開閉、POST送信を制御するファイルです。「入力内容を確認」をクリックすると、現在の入力内容をモーダルへ表示します。「戻る」では入力内容を保持したままモーダルを閉じ、「送信する」では指定したURLへPOST送信します。

設置方法・使い方
sampleフォルダへindex.html・style.css・script.jsを配置してください。3ファイルを同じ階層に保存すると、index.htmlからCSSとJavaScriptが読み込まれます。

index.htmlをブラウザで開くと、お名前・メールアドレス・お問い合わせ内容の入力フォームが表示されます。各項目には入力例があらかじめ設定されていますが、自由に修正できます。

3項目すべてが必須入力です。未入力の項目がある場合やメールアドレスの形式が正しくない場合は、ブラウザの標準機能によって確認画面への移動が制限されます。

「入力内容を確認」をクリックすると、入力された3項目がモーダルウインドウに表示されます。「戻る」をクリックすると、入力内容を保持したままモーダルを閉じます。修正後に再び確認ボタンをクリックすると、最新の入力内容が表示されます。

モーダル内の「送信する」をクリックすると、配布コードではHTMLのaction属性に指定したURLへPOST送信します。

POST送信先の設定
実際にフォームを送信するには、POST形式のデータを受信できるシステムを利用者自身で用意してください。PHPで作成した受信処理や、POST送信に対応したフォーム受付サービスなどを利用できます。

index.html内のaction="YOUR_POST_URL"を探し、YOUR_POST_URLを実際の送信先URLへ置き換えてください。method="post"は変更せずに使用します。

送信される項目は、name（お名前）、email（メールアドレス）、message（お問い合わせ内容）の3つです。受信側のシステムでは、この3項目を受け取れるようにしてください。受信側で異なる項目名を使用している場合は、HTMLのname属性を受信側の仕様に合わせて変更します。

送信先URLを設定したら、フォームに入力して確認モーダルを開き、「送信する」をクリックしてください。受信側で3項目が正しく処理されることを確認します。

このサンプルには、POSTデータの受信処理、メール送信、データ保存、送信完了画面は含まれていません。また、サーバー側での入力検証や迷惑送信対策などのセキュリティ対策も、利用者自身が用意する必要があります。

カスタマイズできる内容
index.htmlでは、入力項目のラベル、初期入力値、確認ボタンの文字、モーダルのタイトル、説明文、戻るボタンや送信ボタンの文字などを変更できます。

お名前とメールアドレスの初期入力値はinput要素のvalue属性、お問い合わせ内容の初期入力値はtextarea要素の開始タグと終了タグの間に記述された文章で変更できます。初期入力値が不要な場合は、value属性を削除し、textarea要素の内容を空欄にしてください。

入力項目を追加する場合は、HTMLの入力欄と確認画面の表示項目、JavaScriptの取得・表示処理を追加してください。POST送信する項目名を変更する場合は、受信側のシステムも対応させる必要があります。

style.cssでは、フォームの最大横幅、入力欄のサイズ、枠線、モーダルの横幅、表示位置、背景色、角丸、影、確認項目の余白、ボタンの色や間隔などを調整できます。

数値調整
style.css

gap:22px;
入力フォーム内の項目同士の間隔です。値を大きくすると間隔が広がり、小さくすると狭くなります。

max-width:520px;
入力フォームとモーダルの最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。

gap:8px;
入力項目のラベルと入力欄の間隔です。値を大きくすると間隔が広がります。

margin-left:6px;
ラベルと赤色の「必須」表示の間隔です。値を大きくすると間隔が広がります。

padding:12px 14px;
入力欄と確認項目の内側余白です。上下の12pxを大きくすると高さが増え、左右の14pxを大きくすると文字と枠線の間隔が広がります。

border:1px solid #cbd5e1;
入力欄の枠線です。1pxは太さ、solidは実線、#cbd5e1は色を表します。

border-radius:8px;
入力欄やボタン、確認項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

min-height:120px;
お問い合わせ内容を入力するテキストエリアの最小高さです。値を大きくすると入力領域が高くなります。

padding:13px 24px;
確認ボタンとモーダル内の操作ボタンの内側余白です。上下の13pxを大きくすると高さが増え、左右の24pxを大きくすると横に広がります。

top:50%;
モーダルの縦方向の表示位置です。50%を基準に画面中央へ配置します。値を小さくすると上方向、大きくすると下方向へ移動します。

left:50%;
モーダルの横方向の表示位置です。50%を基準に画面中央へ配置します。値を小さくすると左方向、大きくすると右方向へ移動します。

width:calc(100% - 40px);
モーダルの横幅です。画面幅から40pxを引き、左右に余白を確保します。40pxを大きくすると画面端との間隔が広がります。

max-height:calc(100vh - 40px);
モーダルの最大高さです。画面の高さから40pxを引いた範囲に収めます。内容が収まらない場合は、モーダル内で縦スクロールできます。

padding:28px;
モーダルの内側余白です。値を大きくすると内容と外周の間隔が広がります。

border-radius:18px;
モーダルの角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

box-shadow:0 20px 40px rgba(0,0,0,.2);
モーダルの影です。20pxは影の上下位置、40pxはぼかし範囲を表します。値を変更すると影の位置や広がりを調整できます。

font-size:22px;
モーダルタイトルの文字サイズです。値を大きくすると文字が大きくなります。

margin:0 0 28px;
モーダル説明文の下側余白です。28pxを大きくすると確認項目との間隔が広がります。

margin:0 0 18px;
確認項目の下側余白です。値を大きくすると各項目の間隔が広がります。

gap:14px;
モーダル内の「戻る」と「送信する」のボタン間隔です。値を大きくすると間隔が広がります。

min-width:140px;
戻るボタンと送信ボタンの最小横幅です。値を大きくするとボタンが横に広がります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。入力フォームにはmax-width:520px;とmargin:0 auto;を設定し、画面幅に合わせて中央に表示します。

モーダルにはwidth:calc(100% - 40px);とmax-width:520px;を設定しており、画面幅が狭い場合は自動的に縮小します。また、max-height:calc(100vh - 40px);とoverflow-y:auto;によって、画面の高さに確認内容が収まらない場合はモーダル内を縦スクロールできます。

画面幅640px以下では、モーダルの内側余白をpadding:24px 18px;に変更します。さらに、戻るボタンと送信ボタンの間隔を10pxに縮小し、2つのボタンを均等な横幅に調整します。スマートフォン・タブレット・PCで利用できる構成です。