質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

545閲覧

入力確認画面でボタンをクリックしたら、折り返しメールを送ると同時にポップアップ画像を表示させたいです。

ghtew2

総合スコア245

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

SCSS

SCSSは、SassのCSSメタ言語です。Webページのスタイルを指定するCSSを効率的に記述することができます。ネストと呼ばれる入れ子構造で記述するため、CSSの全体の記述量を減らせる点が特徴です。さらに変数も利用できるため、変更や修正の際に少ない作業量で対応することもできます。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

1クリップ

投稿2022/05/24 04:07

編集2022/05/25 12:36

概要
入力フォームを作成しているのですが、入力画面①→確認表示画面②→送信完了画面③
のながれで、②の確認表示画面内のボタンを押すと、①で入力した情報が折り返しメールとして届き、③の画面の「送信済み」というメッセージの画面が表示されるようになっています。
提示しているのは②と③のコードのみです。

これを②画面のボタンをクリックしたと同時にライン登録などのポップアップ画像を表示させて、さらに入力情報も同時にメールにて折り返したいのですが、

②のボタンをクリックすると、ポップアップ画像が一瞬だけ出現して、すぐに③の「送信済み」の白い画面に行ってしまいます。情報はきちんと送れています。
実際のサイトのURLは以下です。

これを②のボタンをクリックすると、ポップアップ画像が出現して画像が停止したままで、さらに③の送信完了画面の白いスクリーンがポップアップ画像の後ろ(背面)に表示されると見栄えが良さそうなのですが、
そのように、できないでしょうか?

ポップアップ画像のコードは以下のサイトを参考にしました。
JavaScriptでポップアップを表示する方法を解説!

確認表示画面②のコード

php

1<?php 2session_start(); 3 4 5$email = $_SESSION['email']; 6 7$_SESSION['token'] = base64_encode(openssl_random_pseudo_bytes(48)); 8 9$token = htmlspecialchars($_SESSION['token'], ENT_QUOTES); 10 11?> 12 13<!DOCTYPE html> 14 <html> 15 <head> 16<meta charset ="utf-8"> 17<meta name="viewport" content="width=device-width, initial-scale=1"> 18<link rel="stylesheet" href="reset.css"> 19<link rel="stylesheet" href="0LPmouth-confirmation-screen-responsive2000orless.css"> 20 21<title>初期フォーム確認画面</title> 22<style type="text/css"> 23 24/* ポップアップ */ 25.popup { 26 position: fixed; 27 left: 0; 28 top: 0; 29 width: 100%; 30 height: 100%; 31 z-index: 9999; 32 opacity: 0; 33 visibility: hidden; 34 transition: .6s; 35} 36.popup.is-show7 { 37 opacity: 1; 38 visibility: visible; 39} 40.popup-inner { 41 position: absolute; 42 left: 50%; 43 top: 50%; 44 transform: translate(-50%,-50%); 45 width: 80%; 46 max-width: 600px; 47 padding: 50px; 48 background-color: #fff; 49 z-index: 2; 50} 51.popup-inner img { 52 width: 100%; 53} 54.close-btn { 55 position: absolute; 56 right: 0; 57 top: 0; 58 width: 50px; 59 height: 50px; 60 border-radius: 50%; 61 line-height: 50px; 62 font-size: 20px; 63 font-weight: bold; 64 cursor: pointer; 65} 66.bg-black { 67 position: absolute; 68 left: 0; 69 top: 0; 70 width: 100%; 71 height: 100%; 72 background-color: rgba(0,0,0,.8); 73 z-index: 1; 74 cursor: pointer; 75} 76 77 78</style> 79 80</head> 81 82<body> 83 84<!--ボタン画像起動の為、onsubmit="return false"消去してます。--> 85 <form action ="LPmouth-completion-screen1.php" method ="post" name="doui_form"> 86 87<input type ="hidden" name ="token" value ="<?php echo $token ?>"> 88 89 90<div class="title"> 91<label class="title" for="title">入力内容の確認</label> 92</div> 93 94<label class="col-sm-2 control-label" for="email">メールアドレスの確認: 95<br> 96<small><?php echo $email; ?></small></label> 97</div> 98 99 100 101 102 103<div class="radio_text"> 104 105<section> 106<label class="radio_text"> 107<input type="radio" name="doui" value="suru" checked>同意する 108 </label> 109 <label class="radio_text"> 110 <input type="radio" name="doui" value="shinai">同意しない 111 </label> 112</section> 113</div> 114 115<div class="auto-style1"> 116<!--classを追加btn btn-primaryクリックするとポップアップ出現させる--> 117<button type="submit" id="soushin2" name="submit" class="auto-style4" value="submit"> 118 <div class="btn btn-primary"><img src="image2/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example8"/></div></button>  119 </div> 120 121<!--ボタンをクリックすると出現するポップ画像のHTML--> 122 123 <div id="popup" class="popup"> 124 <div class="popup-inner"> 125 <div id="close-btn" class="close-btn">&#10006;</div> 126 127 <div class="img"><button type="submit" id="soushin3" name="submit" class="auto-style4" value="submit"><img src="image2/25mouth.png" alt="確認画面へ" class="button-simple yureru-s example8"/></button></div> 128 129 130 </div><!-- .popup-inner --> 131 <div id="bg-black" class="bg-black"></div> 132 </div><!-- #popup --> 133 134<!--ボタンをクリックすると出現するポップ画像のHTMLここまで--> 135 136 137 138 139<script> 140 //ボタン画像のエラーコード 141 var doui = document.getElementById('soushin2'); 142 143 doui.addEventListener('click', function(e) { 144if (document.doui_form.doui.value != "suru") { 145alert("利用規約に同意して頂けない場合は本サービスのご利用はお控えください。"); 146e.preventDefault(); 147} else { 148document.doui_form.submit(); 149} 150}) 151</script> 152 153 154 155<script> 156 // ポップアップのセッティング処理 157 function popupSetting(){ 158 let popup = document.getElementById('popup'); 159 if(!popup) return; 160 161 let bgBlack = document.getElementById('bg-black'); 162 let closeBtn = document.getElementById('close-btn'); 163 let soushin2 = document.getElementById('soushin2'); 164 165 // ポップアップ 166 popUp(bgBlack); 167 popUp(closeBtn); 168 popUp(soushin2); 169 170 // ポップアップ処理 171 function popUp(elem){ 172 if(!elem) return; 173 174 elem.addEventListener('click', function(){ 175 popup.classList.toggle('is-show7'); 176 }); 177 } 178 } 179 180 // ポップアップのセッティング 181 popupSetting(); 182 183 184</script> 185 186</form> 187 188 189 </body> 190</html> 191 192 193 194

送信完了画面③PHPMailer メールの折り返しコード

php

1<?php 2 3// PHPMailer クラスをネーム空間にインポート 4use PHPMailer\PHPMailer\PHPMailer; 5use PHPMailer\PHPMailer\SMTP; 6use PHPMailer\PHPMailer\Exception; 7 8 9 10require('PHPMailer/src/PHPMailer.php'); 11require('PHPMailer/src/Exception.php'); 12require('PHPMailer/src/SMTP.php'); 13 14 15 16 17 18// 入力内容の取得・変数に格納 19session_start(); 20 21 22if(isset($_POST['token'], $_SESSION['token']) && ($_POST['token'] === $_SESSION['token'])){ 23 unset($_SESSION['token']); 24 25 26$email = $_SESSION['email']; 27 28} 29// メール日本語対応 30mb_language("japanese"); 31mb_internal_encoding("UTF-8"); 32 33 34 35 36 37// インスタンス生成 38$mail = new PHPMailer(true); 39 40// 文字エンコードを指定 41$mail->CharSet = 'utf-8'; 42 43try { 44 // デバッグ設定 45 // $mail->SMTPDebug = 2; // デバッグ出力を有効化(レベルを指定) 46 // $mail->Debugoutput = function($str, $level) {echo "debug level $level; message: $str<br>";}; 47 48 // SMTPサーバの設定 49 $mail->isSMTP(); // SMTPの使用宣言 50 $mail->Host = '????.com'; // SMTPサーバーを指定 51 $mail->SMTPAuth = true; // SMTP authenticationを有効化 52 $mail->Username = '???'; // SMTPサーバーのユーザ名 53 $mail->Password = '??????'; // SMTPサーバーのパスワード 54 $mail->SMTPSecure = 'ssl'; // 暗号化を有効(tls or ssl)無効の場合はfalse 55 $mail->Port = 465; // TCPポートを指定(tlsの場合は465や587) 56 57 58 59 // メール本体 60 $mail->setFrom('?????', 'camila'); // 送信元メールアドレスと名前 61 $mail->addAddress($email,$name); // 送信先メールアドレスと名前 62 63 $mail->addCC('??????', 'camila');// サーバで作ったアドレスの受信ボックスにも届くようにする。 64 $mail->Body = "下記の情報を受け取りました。\n内容を確認し、こちらから折り返し、ライン又はメールアドレスにてご案内させて頂きます。\n\n"; 65 $mail->Subject = mb_encode_mimeheader('あいうえお'); 66 67 68 69 $mail->Body .= "メールアドレス:".$email."\n"; 70 71 72// 送信 73 $mail->send(); 74 echo '送信済み'; 75} catch (Exception $e) { 76 echo "送信失敗: {$mail->ErrorInfo}"; 77} 78?> 79 80 81<!DOCTYPE html> 82 83<html> 84 85<head> 86 <meta content="text/html; charset=utf-8" /> 87 <meta name="viewport" content="width=device-width, initial-scale=1"> 88 <title> お問い合わせ 送信後の画面</title> 89 90 <link rel="stylesheet" href="reset.css"> 91 92 <style type="text/css"> 93 94</style> 95 96 97</head> 98 99<body> 100 101 102 103 104 105</body> 106 107</html> 108 109 110 111 112 113

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

JavaScriptでモーダル(ポップアップ)を表示させる方法 | Tech dig

https://tech-dig.jp/js-modal/

こちらの方法で解決しました。

投稿2022/05/25 03:36

ghtew2

総合スコア245

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問