HTMLでホームページを勉強しながら作っているプログラミング初心者ですが、
PHPでお問い合わせを作りました。

今、入力フォームページ → 確認ページ → 完了ページとPHPで作ったのですが、
確認ページと完了ページをモーダルウィンドウのような感じで表示したいと思っています。

調べても次のページをモーダルウィンドウで表示する方法が見つからなかったのですが、
モーダルウィンドウ表示するには、入力フォームページのPHPに確認ページと完了ページも書かないと表示することはできないのですか？

アドバイスややり方もしくは何か参考になるサイトなどあれば教えていただければと思います。

行動規範の内容に同意します

回答3件

まずモーダルウィンドウの定義からですね
本来で言うモーダルウィンドウはブラウザの機能で
別ウィンドウのような仕組みで開いていました
ただ管理が煩雑なためにいまはもうほぼ使われていません。

近年言われるモーダルはあくまでも疑似モーダルウィンドウですから
厳密に言えば「次のページ」ではなく、そのページそのものですね
なので入力から確認をモーダルで開く場合、バックグラウンドで
データをやり取りしてその結果をモーダルに表示するという手順になります。

dialogなど新し目のタグで処理するとスマートに見えると思います。

sample

ちょっとざつですがsample
（バリデートもサニタイズもしていないので流れだけみて、そのままは流用しないで）

PHP
1<?PHP
2session_start();
3$flg=filter_input(INPUT_POST,"flg");
4$a=filter_input(INPUT_POST,"a");
5$b=filter_input(INPUT_POST,"b");
6if($flg==1){
7  $_SESSION["a"]=$a;
8  $_SESSION["b"]=$b;
9  print json_encode(["a"=>$a,"b"=>$b]);
10  exit;
11}elseif($flg==2){
12  if(!isset($_SESSION["a"])){
13    header('Location:'.$_SERVER["SCRIPT_NAME"]);
14    exit;
15  }
16  print "完了";
17  print "a=".htmlspecialchars($_SESSION["a"])."/";
18  print "b=".htmlspecialchars($_SESSION["b"])."で登録";
19  unset($_SESSION["a"]);
20  unset($_SESSION["b"]);
21  exit;
22}else{
23  print_r($_SESSION);
24  unset($_SESSION["a"]);
25  unset($_SESSION["b"]);
26}
27?>
28<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
29<script>
30$(function(){
31  
32  $(document).on('click','#close',function(e){
33    $('#dl').removeAttr('open');
34  });
35  $('#f1').on('submit',function(e){
36    e.preventDefault();
37    $.ajax({
38      "type":"post",
39      "data":new FormData($(this).get(0)),
40      "dataType":"json",
41      "cache":false,
42      "processData": false,
43      "contentType": false,
44    }).done(function(data){
45      $('#dl').remove();
46      var form=$('<form method="post">');
47      $('<div>').text("a:"+data.a).appendTo(form);
48      $('<div>').text("b:"+data.b).appendTo(form);
49      $('<input type="hidden" name="flg" value="2">').appendTo(form);
50      $('<div>').html($('<input type="submit" value="登録"><input type="button" id="close" value="閉じる">')).appendTo(form);
51      $('<dialog id="dl" open>').html(form).appendTo('body');
52      console.log(data);
53    });
54  });
55});
56</script>
57<form method="post" id="f1">
58a:<input type="text" name="a"><br>
59b:<input type="text" name="b"><br>
60<input type="submit" value="send">
61<input type="hidden" name="flg" value="1">
62</form>

投稿2019/03/07 03:09

編集2019/03/07 04:14

yambejp

総合スコア117615

yambejp

2019/03/07 04:17

入力→確認はajaxで値をsubmit、確認→完了はflg情報だけsubmitし値はセッション部分を参照

momomiya

2019/03/12 02:05

丁寧にコードまでありがとうございます。やはり次のページではなくそのページに書くんですね。今の私の知識では理解できなかったので、これを参考に勉強してみます。

退会済みユーザー

2019/03/12 02:13 編集

> 本来で言うモーダルウィンドウはブラウザの機能で > 別ウィンドウのような仕組みで開いていましたそれはモードレスじゃねーですかい？追記: うーんなんかモヤつくけどやっぱ何でもないですわ。すんません。

yambejp

2019/03/12 02:15

window.showModalDialogのことだからモーダルですよ

退会済みユーザー

2019/03/12 02:30

あぁ、たしかに。完ぺきな勘違いですわ。申し訳ない。

行動規範の内容に同意します

こういうのケースバイケースでわかってた方がいいと思うので、自分のやり方を共有します。
基本的にはjsでクラスを付与する方法を取ってます。
たとえば最初のフォームで入力値を自分はVue.jsのv-modelで次の確認モーダルウィンドウへ
双方向のバインディングをします。で、最初のフォームのボタンを押したときにモーダルウィンドウになるタグに
クラスを付与して表示させるとかですね。
ご参考までに。

簡易的なものですが、こんな感じです。

html
1<html lang="ja">
2<head>
3  <meta charset="UTF-8">
4  <meta name="viewport" content="width=device-width, initial-scale=1.0">
5  <meta http-equiv="X-UA-Compatible" content="ie=edge">
6  <title>Document</title>
7  <style>
8    * {
9      padding: 0;
10      margin: 0;
11    }
12    .st-modal {
13      position: fixed;
14      left: 0;
15      right: 0;
16      top: 120px;
17      width: 320px;
18      max-width: 0;
19      margin: 0 auto;
20      box-shadow: 0 0 6px rgba(0,0,0,0.16);
21      transition: 0.2s all;
22      visibility: visible;
23      overflow: hidden;
24    }
25    .st-modal.active {
26      max-width: 320px;
27      visibility: initial;
28      overflow: initial;
29      padding: 20px;
30      background-color: #efefef;
31    }
32    dl{
33      display: flex;
34      align-items: center;
35    }
36  </style>
37</head>
38<body>
39  <div id="app">
40    <form>
41      <div class="form">
42        <input
43          type="text"
44          v-model="name"
45          required
46          aria-required="true"
47        >
48        <button
49          v-if="name"
50          type="button"
51          @click="isActive = true"
52        >
53          確認
54        </button>
55        <p v-else>{{ isMessage() }}</p>
56      </div>
57      <div
58        :class="{ active: isActive }"
59        class="st-modal"
60      >
61        <dl>
62          <dt>お名前:</dt>
63          <dd>{{ name }}</dd>
64        </dl>
65        <button type="submit">
66          送信
67        </button>
68      </div>
69    </form>
70  </div>
71<script src="https://cdn.jsdelivr.net/npm/vue"></script>
72<script>
73const app = new Vue({
74  el: '#app',
75  data: {
76    name: '',
77    isActive: false
78  },
79  methods: {
80    isMessage: function () {
81      if (!this.name) return 'お名前が入力されていません。'
82    }
83  }
84})
85</script>
86</body>
87</html>