PHPで開発を進めていると、見栄え良く作成したい画面も多く発生します。
お客様からそういった要望をいただくこともしばしばです。
その中でもポップアップは見栄えもよく、ユーザーの操作の制限も出来るため使用する場面も多いと思います。
ただ、CSSやjavascriptを使うのでよくわからないと初め戸惑ってしまう方もいるでしょう。
今回は、そんなお悩みを解決すべく以下の内容でお話をしていきます。
【基本】ポップアップについて
【実践】jsのconfirmでポップアップを作る
【応用】オリジナルのポップアップ
わかりやすく解説していきますので、是非最後まで読んでください。
ポップアップとは
ポップアップとは、WEBサイトなどを閲覧している時に飛び出すウインドウの事です。
ポップアップウインドウを略してポップアップと呼んでいます。
一番簡単な方法だとjavascriptのalertで以下のように簡単に作る事が出来ます。
<?php
$test_alert = "<script type='text/javascript'>alert('こんにちは！侍エンジニアです。');</script>";
echo $test_alert;
■画面表示結果
しかし、javascriptのalertは仕様がきちんと決まっているため改変が出来ません。
選択肢をはい・いいえにするなどは一切出来ません。
そこで今回は他の方法でポップアップを作成する方法を紹介していきます。
javascriptのconfirmでポップアップを作る
alertの次に簡単な方法としては、confirmを使う方法です。
test.phpに以下のように記述をします。
<script>
function confirm_test() {
var select = confirm("問い合わせますか？n「OK」で送信n「キャンセル」で送信中止");
return select;
}
</script>
<form method="POST" action="test.php" onsubmit="return confirm_test()">
名前<br />
<input type="text" name="user_name" value="" /><br /><br />
問い合わせ内容<br />
<textarea name="user_question"></textarea><br /><br />
<input type="submit" value="問い合わせる" />
</form>
PHP内でも<script></script>で囲むと、javascriptを記述できます。
formをsubmit(＝問い合わせるボタンを押下)した時に、confirm_testを呼び出す記述が以下です。
onsubmit="return confirm_test()"
confirm_testの中身は、以下のようにconfirmにポップアップの内容を渡しています。
var select = confirm("問い合わせますか？n「OK」で送信n「キャンセル」で送信中止");
■表示結果
「OK」「キャンセル」の選択は自動的に出力されますが、逆に「はい」「いいえ」などに変更する事も出来ません。
また、「OK」「キャンセル」の選択結果によって処理を変える事も出来ます。
confirm_testのselectには「OK」＝true、「キャンセル」＝falseと返ってくる値が違います。
confirm_testの中で、if文によって処理分ける事ができます。
これも覚えておくとよいと思います。
オリジナルポップアップを作る
これまではjavascriptの機能を使ったポップアップのお話をしてきましたが、簡単に実装できても自由度が低いのが残念な部分でした。
最後にご紹介するのは、ポップアップの画面自体を作る方法です。
前章で使ったtest.phpを修正します。
<script>
function confirm_test() { // 問い合わせるボタンをクリックした場合
document.getElementById('popup').style.display = 'block';
return false;
}
function okfunc() { // OKをクリックした場合
document.contactform.submit();
}
function nofunc() { // キャンセルをクリックした場合
document.getElementById('popup').style.display = 'none';
}
</script>
<div >
<form method="POST" name="contactform" action="test2.php">
名前<br />
<input type="text" name="user_name" value="" /><br /><br />
問い合わせ内容<br />
<textarea name="user_question"></textarea><br /><br />
<input type="submit" value="問い合わせる" name="contact" onclick="return confirm_test()" />
</form>
<div id="popup" style="width: 200px;display: none;padding: 30px 20px;border: 2px solid #000;margin: auto;">
問い合わせますか？<br />
<button id="ok" onclick="okfunc()">OK</button>
<button id="no" onclick="nofunc()">キャンセル</button>
</div>
【id=”popup”】のdivで囲まれているのがポップアップの部分です。
デザインや文言を自由に変更できます。
問い合わせるボタンをクリックすると、confirm_testが呼ばれポップアップが出現します。
以下がポップアップ出現のための記述です。
document.getElementById('popup').style.display = 'block';
OKをクリックした場合、okfuncが呼ばれ、入力した内容が指定したaction(サンプルの場合test2.php)に送信されます。
キャンセルをクリックした場合、nofuncが呼ばれ、ポップアップが消えます。
以下がポップアップを消すための記述です。
document.getElementById('popup').style.display = 'none';
■画面表示結果
test1.phpの「問い合わせる」ボタンクリック後は、test2.phpに情報が送られます。
test2.phpでは、test.phpで入力した内容を画面表示させます。
// test2.php <?php echo "問い合わせ内容"; echo "<br />"; echo "<br />"; echo "名前 :". $_POST['user_name']; echo "<br />"; echo "問い合わせ内容 :".$_POST['user_question'];
formで送られた情報は$_POSTで取得できます。
受け取った情報を画面に表示します。
■表示結果
問い合わせ内容 名前 :佐々木 問い合わせ内容 :いつ頃発売になりますか
入力した内容が送ったページに表示出来る事を確認しました。
まとめ
今回はPHPのポップアップについてお話しました。
javascriptの機能で簡単に開発する方法以外に、自由に作成する方法もご紹介しました。
どちらにしてもjavascriptの知識は必要ですので、少しずつ覚えていくのがおすすめです。
CSSの知識も、きれいに整形する場合は必要ですね。
それでは、また。
