スライドショー

PHPのポップアップは意外と簡単!サンプルつき解説

PHPで開発を進めていると、見栄え良く作成したい画面も多く発生します。

お客様からそういった要望をいただくこともしばしばです。

その中でもポップアップ見栄えもよく、ユーザーの操作の制限も出来るため使用する場面も多いと思います。

ただ、CSSやjavascriptを使うのでよくわからないと初め戸惑ってしまう方もいるでしょう。

今回は、そんなお悩みを解決すべく以下の内容でお話をしていきます。


【基本】ポップアップについて
【実践】jsのconfirmでポップアップを作る
【応用】オリジナルのポップアップ

わかりやすく解説していきますので、是非最後まで読んでください。

ポップアップとは

ポップアップとは、WEBサイトなどを閲覧している時に飛び出すウインドウの事です。

ポップアップウインドウを略してポップアップと呼んでいます。

一番簡単な方法だとjavascriptalertで以下のように簡単に作る事が出来ます。

<?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の知識も、きれいに整形する場合は必要ですね。

それでは、また。

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

つぶらや

つぶらや

独学PG&SE、東京在住30代女性。
誰でもプログラマーになれるがモットーで、わかりやすい記事を目指しています。