JavaScriptでポップアップが閉じられない

Question

こんにちは、プログラミング初心者でWebアプリを作っており、
現在、JavaScriptの簡単なところで詰まってしまいました。

あるWebアプリをコピーして練習をしているのですが、
元々のhtmlのソースに処理をしていくので、
だいぶわかりにくくなってしまっています。

そこで、今回はポップアップを表示させて、
「キャンセル」ボタンを押すと
そのポップアップが閉じる処理をJavaScriptにさせたいです。

現状は、ポップアップは表示できたのですが、
閉じる処理がどうもできません。
何卒ご教授願います。

こちらが、関係があると思われるソースコードです。

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
	<form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか？</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); return false;">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
$(function () {
	$('#choice_84462_popup').magnificPopup({
		type: 'inline',
		preloader: false
	});
	$(document).on('click', '.btnCancel-choice', function (e) {
		e.preventDefault();
		$.magnificPopup.close();
	});
});
</script>

だいぶ画面とにらめっこをしていたのですが、
わかりません。
よろしく御願い致します。

Answer 1

なんだか意見や知識が溢れかえっているようなので条件を満たす最小限の方法を私は提示してみます。

まずこのポップアップはHTMLのdivタグなどを表示して擬似的に再現された物です。
"ポップアップ箇所ここから"とコメントされている箇所を見てください。

<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
<!--省略-->
</div>

style="display : none;"という記述がありますね。これは設定された要素を非表示にします。
次にクリックされた時の処理を見てください。
CSSのStyle、displayをblockにするというコードがポップアップを表示するコードとなります。

であれば非表示にする(ポップアップを閉じる)方法は単純です。
閉じるためのボタンとなる物を設置し、そこにクリックイベントで動作するメソッドを設定します。

//処理内容
document.getElementId("choice_84462_popup"").style.display="none"

これで閉じる(非表示にする)ことができます。

……がjQueryプラグインを使用しているのですよね?
であれば閉じるメソッドも当然そこにある物と思うのですが。

Answer 2

閉じるボタンに
onclick="document.getElementById('choice_84462_popup').style.display='none';"

Answer 3

ブラウザによっても挙動が違うようです。
このサイトでまとめてくれてますが、window.close()で閉じるのはIEだけみたいです。

挙動が大事！ JavaScriptでWindow.closeする時のブラウザ別対応まとめ

Answer 4

ですからー、この人プラグインなんて使ってないんですって！

でも皆さまプラグインを使っていると勘違いして複雑になっています。
ていうかこの程度の動きはプラグインつかうと余計めんどくさいきがするんですが。

なので、いったんそのどっかからコピってきた訳の分からないHTMLソースを全部削除して、シンプルに以前私の提示したソースで組み直してみてほしいなぁ。

一回書いたモノを全部破棄するのもクリエイティブな事だと思いますよ。ウンウン

Answer 5

ここのコードが理解できていなかったのですよね？jQueryだったからですか？
だから、逃げの一手で、DOMにネイティブでイベント処理を書いたのですよね？見ればわかります。

確かにこれは簡単じゃないかもですね。少し解説しましょう。

$(function () {
    // id属性にchoice_84462が指定してある要素に対して、clickイベントが発生した際、
    // 匿名関数を用意しておいて、これを実行させています。
    // 匿名関数？ググってください。と言いたいところですが・・・
    // 確かにこれは難しいです。分らないのも仕方ありません。
    // http://www.ajaxtower.jp/js/function/index5.html ここ見てください。
    // つまりこれがイベントハンドラの処理です。
    // jQueryのonメソッドでググってください。つまりこれが動的にイベントハンドラを
    // くっつける（アタッチしている）ことになります。
    // 'click'は何のイベントに対してイベントハンドラを定義するかを指定しています。
    // '#choice_84462'はセレクタ（要素を特定するための手掛かり）です。
    // 勘違いしてはいけません。#choice_84462という名前ではありません。
    // 頭に#が付いていると、idがchoice_84462という要素を探せという意味になります。
    $(document).on('click', '#choice_84462', function (e) {
            // idがchoice_84462_popupという要素に対して、magnificPopupメソッドを実行していますが
            // jQueryに、そんなメソッドはありません。
            // それと、よく見てください。
            // choice_84462 ではありませんよ？ choice_84462_popupです。混同しないでください。
            // これを見つけたからmagnificPopupという
            // ライブラリを使っていると読み解けたんです
            // jQuery magnificPopupでググってください。
            // 本家のURLならライブラリをロードしてる場所に書いておきましたが
            // 使い方は他のサイトがいいでしょう。自分で探してください。
	    $('#choice_84462_popup').magnificPopup({
	        type: 'inline',
	        preloader: false
	    });
    }); // ここまでがidがchoice_84462な要素のイベントハンドラ
    // もう一つ別の要素に対して、イベントハンドラをアタッチしています。
    // ただし、今度はセレクタが'.btnCancel-choice'です。
    // セレクタの先頭に . （ドット）を書いた場合はクラス名で探せという意味になります。
    // クラス名にbtnCancel-choiceが指定されている要素に対してのイベントハンドラです。
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault(); // ここを見ましょう。
                            // http://www.tam-tam.co.jp/tipsnote/javascript/post5050.html
                            // ちょっとググっただけで、すぐに見つかりましたよ？
                            // コードの理解を早々に投げ出して調べてもいないのが丸わかりです
                            // とはいえ、これは見つけたからと言ってすぐには理解できないかもですね。
                            // イベントと言うのはですね。特定の要素で発生した後に
                            // 同じイベントが、それを包括する要素へと伝播します
                            // 要素の上位へ上位へと上がっていくことから、泡が浮き上がっていくようなので
                            // bubble（泡）で、バブリングといいます。
                            // 特定の要素でイベントが発生したとして、そこにイベントハンドラがないなら
                            // 処理しようがありませんから、そこでは何もしません。
                            // 定義してあれば、もちろん起動します。その上でさらに
                            // 親の要素へイベントが浮き上がり、どんどん上がって行きながら
                            // 途中で見つけたイベントハンドラをかたっぱしから起動するのです
                            // もちろん、上がって行っているイベントが見つけたイベントハンドラが
                            // 処理対象としているイベントであった場合ですよ？
        $.magnificPopup.close(); // magnificPopupのcloseを調べてください。
    });
});

さぁ、手掛かりは書いておきましたよ？調べ方の道筋を示しました。
今度は何処から手を付けていいか分らない等と言うことは無いはずです。
これで分らないと言い出すのは、調べてないということになりますよ？
いやまぁ、見つけても理解に難しい内容のものがある場合も確かにありますが・・・
そのときは・・・ いますよね？ 馬鹿だけど、おせっかいな奴が・・・

ネイティブでイベントハンドラをアタッチする方法は、
javascript イベントハンドラ 追加
でググってください。いやってほど出てきますよ？

お疲れさまでした。これで終わりです。
よく投げださずに付き合ってくださいました。

説明が下手な言葉を重ねねば満足に説明も出来ない無能な人間に付き合っていただき
本当に、本当にありがとうございました。m(_ _)m

ここまで投げ出さずに努力してくださったことに対し、最大限の敬意を表します。

最後に、今一度書きます。

勉強する気さえあれば、こんな、私のような未熟者のコードなんか、すぐに分るはずですよ？
こちらにいらっしゃる、有能な先輩方なら、私のこのコードみて下手糞と笑っているはずですよ？

本当に勉強する気持ちがあるなら、分らなかったら悔しくて眠れないはずです。
そして、どうやっても分らなかったら、恥を忍んででも、ここへ教えてくれと来るはずです。

これだけダラダラと説明することを決心した時から最後まで付き合うと腹を決めていました。

ご自身が書かれているように、プログラミング初心者ということは承りました。
だからこそ、手取り足とり解説しました。

どうか投げ出さないでください。

待ってますよ？

Answer 6

ところで、何故、jQueryを使うのか？ 今まで、あえて触れてきませんでしたが、JavaScriptというのは
ブラウザごとに微妙に実装が違ったりしています。同じブラウザですら、バージョンが違うと動作が違ったりします。そういうブラウザの違いをjQueryは吸収してくれるのです。
これを使えば、クロスブラウザ開発が格段に楽になるんです。
あとは、CSSの違いくらいが、クロスブラウザ対策で残っているくらいです。

そして、jQueryには、ネイティブなJavaScriptにはない色々な便利機能があります。だから皆、jQueryを使うんです。

勉強する気さえあれば、こんな、私のような未熟者のコードなんか、すぐに分るはずですよ？
こちらにいらっしゃる、有能な先輩方なら、私のこのコードみて下手糞と笑っているはずですよ？

もちろん分っています。勉強したくても、どこから手を付けていいのかが分らないのですよね？
それは私が何とかしましょう。そのために言葉を重ねて説明しています。

本当に勉強する気持ちがあるなら、分らなかったら悔しくて眠れないはずです。
そして、どうやっても分らなかったら、恥を忍んででも、ここへ教えてくれと来るはずです。

色々生意気言ってすみません。最後に、まだ、解決してない問題がありますよね？

アプローチは２つあります、
１．全てイベントハンドラはDOMに（タグの属性として）定義する
２．scriptタグで囲まれているスクリプトで動的に要素に対してイベントハンドラを接続する（アタッチする）

この２を説明してません。これを述べなきゃ片手落ちというものです。
では、以下にスクリプトで動的に要素に対してイベントハンドラを接続する（アタッチする） 方法を
jQueryを使って提示します。

これによって、初めて、そちら様がご用意なされたライブラリが使えます。
その結果、ポップアップするDIVがリッチなものになるんです。
確認できなかったので、例としてあげますが
（このライブラリに、そんな機能があるとは言ってません誤解しないでください）
たとえばポップアップする時にMACみたいに、小さなウィンドウが
回転しながら大きくなっていって、最後にボーン見たいに出せるかも
ライブラリがそう作ってあれば、出来るかもしれないのです。
何の労力も使わずに、ただライブラリを利用するだけでです。
これが狙いでライブラリを使っているんですよ？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<!--
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>
-->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか？</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <!--
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); return false;">キャンセル</a></p>
            -->
            <p class="btnCancel-choice"><a href="#">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
$(function () {
    $(document).on('click', '#choice_84462', function (e) {
	    $('#choice_84462_popup').magnificPopup({
	        type: 'inline',
	        preloader: false
	    });
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
// -->
</script>

</body>

</html>

ちゃんと元あったコードを活用し動くように修正してあります。そのはずです。

ただ、申し訳ありません。ちゃんと動作確認をした上で提示したかったのですが
必要なファイルが、いくつかご提示いただけていないため、
今提示したコードだけは、動作確認が出来ませんでした。

ここまで来て、それは無いだろう？はい、すみません。私の力不足です。

Answer 7

能書きはいいから、さっさと教えろ？いいでしょう。もう、提示しても理解できますよね？
説明なんかしませんよ？分らないなら前に戻って確認してきてください。

DOMに直書き、jQueryの場合のみ書きます。DOMに直書きでネイティブコードの場合は、もうどうすればいいか、ここまでのことが、ちゃんと理解できていれば分るはずです。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="$('#choice_84462_popup').css('display', 'block');">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか？</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="$('#choice_84462_popup').css('display', 'none'); ">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
/*
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
*/
// -->
</script>

</body>

</html>

scriptタグ内のコードをDOMから呼び出す場合でjQueryで書くなら、こうなります。ネイティブコードは書きません。分るはずです。分るように説明してきましたよ？

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="showHideDiv('show','choice_84462_popup')">ペアを組む</a>

<!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか？</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="showHideDiv('hide','choice_84462_popup')">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
function showHideDiv(mode,id){
    var jqDiv = $('#'+id);
    
    if (!jqDiv[0]) {
        alert("ランタイムエラー：idの指定が不正です。");
        return false;
    }
    
    switch (mode){
        case 'show':
            jqDiv.css('display', 'block');
            break;
        case 'hide':
            jqDiv.css('display', 'none');
            break;
        default:
            alert("ランタイムエラー：modeの指定が不正です。");
            break;
    }
}

/*
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
*/
// -->
</script>

</body>

</html>

はい、気づきましたか？気づいてませんか？
何かが違いますよね？

私は意図的にコードを変えてますよ？

意地悪ですか？

そう取られるならそれでもいいですが、この意図は、関数呼び出しの形を取れば
このように凝った事ができるということを提示したかったんです。

何をしているのか理解できませんか？そうかもしれませんね・・・
でも、ご説明しません。

自分で調べてみてください。どうもjQueryだからといって難しいからと投げ出してコードの理解に
挑もうとしてないように見受けられたから、こうしてるのですよ？

ただし、注意点が一点、コードが何をやっているかを理解するだけで終わらないでください。
本当に理解するということは、コードが何故こうなっているのか？いったい、何を意図してこうなっているのか？狙いは何なのか？
プログラマーそのものの、思考の流れ、意図していること。

それを考えてください。意味もなく、こんなコードを書いたわけではないのですよ？

jQueryでググってください。 コードの断片でも検索のキーワードに使ってググってみてください。
グーグル先生は、驚くほど頭がいいですよ？曖昧なコード断片でもそれなりにHITしてくれます。

jQueryユーザーはいっぱいいます。従って、これに関するページなんか掃いて捨てるほどありますよ？

Answer 8

おかえりなさい。大丈夫ですか？
それでは、閉じる場合についてご説明しますが、実はもう必要な予備知識は与えていますよ？
何のために、これだけ言葉を重ねたと思っていますか？

確かに答え一発、これを提示すれば、ことは終わりです。
しかし、それは相手が十分な予備知識を習得している場合です。
失礼ながら、コードを見ただけで必要な予備知識の習得が出来ていないのが容易に想像できたので
予備知識から、ご説明したんです。

もう今は必要な予備知識は習得できているはずなので、どうすればいいかわかるはずです。

私は何と書きましたか？
現在、そちら様がポップアップウィンドウだと思っている物は
ポップアップウィンドウなどではありません

DIVタグに、style="display: none"とありますね？
つまり、このDIVタグで囲まれている要素は、
存在しているにも関わらず、要素のサイズは０で非表示状態で待機している

何らかのタイミングで、この要素のスタイルが、
style="display: block"と書き換えられた瞬間に
いきなり忽然と魔法のようにあらわれる

こう書いたはずですよ？
そして、displayをblockに書き換える方法を、えんえんと説明してきました。

非表示状態がdisplay: none;で
表示状態にするにはdisplay: block；なら

消すには逆をやればいいと気づきましたか？

ちゃんと、これが偽物のポップアップウィンドウで、本当はただのDIVを隠しておいたものを
望んだタイミングで表示しているにすぎないということが理解できていれば
逆をやればいいと気づくはずです。

しかし、提示されたコードは
window.close()でしたね？
だから、愕然としたのです。理解できていないこと、そして予備知識の習得が出来ていないことを
読み取れたのです。

もちろん、プログラミングの経験がないということは把握しています。
だから、１から説明しています。

Answer 9

さて、これで、１．全てイベントハンドラはDOMに（タグの属性として）定義する についての
ポップアップウィンドウを開く（ように見えているだけの、実際にはDIVを表示状態にする）
が、出来ましたね？

そして、本題の閉じるための方法ですが、
ちゃんと、ここまでを飛ばしたりせずに読んできましたか？
理解できなかった場合は、前に戻って、ちゃんと確認しましたか？
どうしても理解できないなら提示したコードを実際に動かして、色々いじってみって試しましたか？

答えを書くのは簡単です。あえてそれをせずに独りよがりな演説を調子にのって、ぶちかましている
某巨大掲示板で言う処の、公開オナニーを行うという
恥さらしな行為までした、私の苦労を無駄にしないでください。

試してないなら今からでも動作確認してきてください。

Answer 10

そして、問題はこれをどう起動するか（kickするといいます）です
いま、１．全てイベントハンドラはDOMに（タグの属性として）定義するの１－１．簡単なスクリプトでとりあえず逃げる。
をやってるので、ポップアップのDIVタグの要素を表示する契機（トリガー）となる要素へ、
このスクリプトを定義してやって、
clickというイベントが発生した（ユーザーがトリガー要素をクリックした）タイミングで
kickするように指定してやればいいわけです。

トリガーとなる要素は、

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462">ペアを組む</a>

このリンクで、これをclickしたときにkickされればいいので、この場合onClickという属性にセットします。
例として、jQueryで書いたものを呼び出す場合の書き方を書きます。もう片方は分りますね？

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="$('#choice_84462_popup').css('display', 'block');">ペアを組む</a>

付いてきていますか？途中で投げ出さないでください。今ががんばり時ですよ？
がんばれば出来るんです。やればできます。投げ出しては進歩はありませんよ？ Fight!!

こんどは、１．全てイベントハンドラはDOMに（タグの属性として）定義する の１－２．ちゃんとscriptタグ内のコードを呼び出して、このコードを生かす。
これを、やってみましょう。

これを実現するためには、
c.まずは、実現したい処理を一纏まりの塊として定義してやり
d.そして、これを呼び出すコードを書く

cを実現するためには、処理の塊を関数として定義・宣言してやります
今までのことを踏まえて、少しずつ応用していきますよ？しっかりついてきてくださいね？

JavaScriptにおいて処理を一纏まりの定義（関数）として宣言するにはfunctionを使います。

全部ネイティブな（jQueryを使わないで）処理で書くなら、こう書きます。

function showDiv(){
    document.getElementById('choice_84462_popup').style.display='block';
}

jQueryで書くならこう書きます。

function showDiv(){
    $('#choice_84462_popup').css('display', 'block');
}

今は、関数の定義は非常に簡単なものにしていますが、その気になれば、関数内で
DIVを表示状態にして（スタイルをblockにする）
ユーザ名に合わせて、特定のユーザーであったら、特定の要素の色を変える
条件によっては、画像を表示するimgタグを動的に追加して画像を表示する
などなど、その気になれば、いくらでも作りこむことができます。
やり方は、あえて書きません、勉強する気があれば、それこそteratail内を血眼になって
探し回れば売るほど出てきますよ？努力してください、努力を怠らなければ結果はついてきます。

つぎに、dですが、これは、もう既にやり方を提示してありますよ？それを応用するだけです。

全部ネイティブな（jQueryを使わないで）処理で書くなら、こう書きます。

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="showDiv()">ペアを組む</a>

<script type="text/javascript">
<!--
function showDiv(){
    document.getElementById('choice_84462_popup').style.display='block';
}
// -->
</script>

jQueryで書くなら、こうなります

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="showDiv()">ペアを組む</a>

<script type="text/javascript">
<!--
function showDiv(){
    $('#choice_84462_popup').css('display', 'block');
}
// -->
</script>

考え方は同じです。もし迷ったら、前に戻ってください。一つ一つ基本を提示して積み上げてきていますので、迷ったら基本に立ち返ってください。

Answer 11

さて、前置きがやっとおわりました。すみません。力不足なため、これだけのことに
ずいぶんと時間を使ってしまいました。申し訳ありません。

では、どうすればいいのか

まず、ポリシーがブレています。

おそらくは、よく理解できなかったがため、悪戦苦闘して試行錯誤されたのでしょうね＞＜
苦労なさったんですね。がんばりましたね。

その結果、イベントハンドラを、いったい、DOMで（タグの属性として）定義するつもりなのか
スクリプトで動的に定義するつもりなのかが統一されていません。

そしてscriptタグで囲まれているスクリプトについて理解されていませんね？
このスクリプトが理解できていたら、これを生かすソースになったはずですし、
これを使ないで、DOMに（タグの属性として）イベントハンドラを書くつもりならば
このスクリプトは用なしなので、さくっと消していたはずです。

アプローチは２つあります、
１．全てイベントハンドラはDOMに（タグの属性として）定義する
２．scriptタグで囲まれているスクリプトで動的に要素に対してイベントハンドラを接続する（アタッチする）

まず、１のアプローチからやってみましょう。
１のアプローチでも２つの方法があります。
１－１．簡単なスクリプトでとりあえず逃げる。
１－２．ちゃんとscriptタグ内のコードを呼び出して、このコードを生かす。

１－１ならば
まず、ポップアップとして見かけ上表示され、他の要素の上に重なって表示される、この要素の

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">

現状style="display: none"となっている物をstyle="display: block;"と書き換えてやることです。
そのためには
a.要素を特定する
b.要素の属性のstyleの、さらにdisplayをblockへ書き換える

aをjQueryを使わずに書くならば

document.getElementById('choice_84462_popup')

こうですね？

jQueryで書くなら

$('#choice_84462_popup')

こうなりますね？分らなければ 「jQuery セレクタ」で検索してください。
調べれば分かることを放棄して楽なほうへ行こうとしているのが見えていますよ？
投げ出さないでください。ちゃんと説明しますから。

bをjQueryを使わずに書くならば

ある特定の要素のオブジェクト.style.display='block'

こう書きます。

jQueryで書くなら

ある特定の要素のjQueryオブジェクト.css('display', 'block');

こうです
style ではなく css であることに注意してください。

組み合わせて

jQueryを使わずに書くならば

document.getElementById('choice_84462_popup').style.display='block';

jQueryで書くなら

$('#choice_84462_popup').css('display', 'block');

こうなります。

Answer 12

ここまではOKですか？

続けます。

さて、まず、大きな勘違いをなさっていますが、現在、そちら様がポップアップウィンドウだと思っている物は
ポップアップウィンドウなどではありません
ちがいます。ちがうんです。
もしも、本物のウィンドウであったならば

<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>

これは、こうなっているはずです

<a href="javascript:window.open('popupWindowSorce.htm', 'popupWindow', 'width=400, height=300, menubar=no, toolbar=no, scrollbars=yes');">ペアを組む</a>

でも、そうはなっていませんね？
じゃぁどういうことかと言うと、

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">

このDIVタグに、style="display: none"とありますね？
つまり、このDIVタグで囲まれている要素は、
存在しているにも関わらず、要素のサイズは０で非表示状態で待機している
のです。

キーワードを
CSS スタイルシート display
で検索してみてくださいね。

そして、何らかのタイミングで、この要素のスタイルが、
style="display: block"と書き換えられた瞬間に
いきなり忽然と魔法のようにあらわれるのです。表示される瞬間に要素のサイズも指定されます。

そして、ご提示いただけていませんが、おそらくは、このDIVタグに対して定義されている
クラス名 area-popupか pair-choice もしくは、id名choice_84462_popupに対応する
スタイルシートにfloat属性が定義されている
これによって、他の要素の上にかぶさって表示されているがため、
一見ポップアップウィンドウのように見えているだけ
で、これはウィンドウではなく、れっきとした、このページ、同一ページ内の１要素でしかありません。

スタイルシート floatでググってみてください。

重ね合わせと、表示位置をいじることで要素をそのように見せているにすぎません。
それが証拠に、このページのソース自身に、ポップアップウィンドウだと把握していた要素が
定義されています。これが動かぬ証拠です。

本当のポップアップウィンドウであれば、別ファイルに内容が記述してあるはずなんです。

Answer 13

まず、おそらく、
イベントハンドラとは何か？どうやって実装するものか？
インラインスクリプトとは何か？
要素のonClick属性にスクリプトを書くというのはどういうことなのか？
これが理解できていませんね？

こちらを読んでみてください。
HTMLへのスクリプトの埋め込み

では、今現状イベントハンドラが何処にどのようにアタッチされているかを確認してみましょう
こういう時に、とっても便利なのがFireFoxというブラウザでとても強力なデバッグ機能があります

スクリプトなどの開発も、まずこれでやっておいてから、IEやクローム等、クロスブラウザ対応を行うと
楽です。
下のはイベントハンドラの状況の調査のみ行っていますが
スクリプトのデバッグ機能も強力です。途中で値を見たりもできます。活用しましょう。

使い方が分らなければ、
FireFox 開発者ツール 使い方
とでも、検索すれば沢山出てくるはずです。

![要素を右クリックします]WIDTH:600
![![イメージ説明]WIDTH:600]WIDTH:600
![イメージ説明]WIDTH:600
![イメージ説明]WIDTH:600
「ペアを組む」というリンクにはDOMで（つまりタグの属性として）イベントハンドラが定義してあることが分り、そこに書かれているスクリプト（すなわちこのリンクに対するイベントハンドラのコードその物）が定義されていることが分ります。

![![イメージ説明]WIDTH:600
ポップアップと把握している（←ここ重要あとで説明します）ウィンドウの選択をキャンセルするためのリンクには
DOMで（つまりタグの属性として）イベントハンドラが定義してあることが分り、そこに書かれているスクリプト（すなわちこのリンクに対するイベントハンドラのコードその物）が定義されていることが分ります。
ここに、window.close()と書いてある時点で・・・ 愕然としましたが、慣れてないのですから仕方ありませんね。まぁ後で説明します。

![イメージ説明]WIDTH:600
そして、そのリンクを包むPタグには・・・ jQueryでLiveつまり動的にイベントハンドラが定義されており
そこに、スクリプトの関数が接続してあります
内部の要素にイベントハンドラが定義してあり。それを包む要素にも定義してあります。
もちろん、整合性が取れていれば問題はありませんが・・・

Answer 14

とりあえず、動作確認をとるために欠落していた情報を、こちらである程度、推測してですが、補完したソースをまずは提示しますね。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>

<head>
     <meta http-equiv="Content-Type" content="text/html; charset=euc-jp">
     <link rel="stylesheet" href="./magnific-popup.css">
</head>

<body>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- https://github.com/dimsemenov/Magnific-Popup/ -->
<!--  for debug 
<script src="./jquery.magnific-popup.js"></script>
-->
<script src="./jquery.magnific-popup.min.js"></script>

<!-- ポップアップする為のリンク -->
<a href="#choice_84462_popup" class="btn-pair" id="choice_84462" onclick="document.getElementById('choice_84462_popup').style.display='block';">ペアを組む</a>

 <!-- ポップアップ箇所 ここから -->
<div class="area-popup pair-choice" id="choice_84462_popup" style="display: none">
    <div class="btnClose-choice"></div>
    <form>
                <input type="hidden" name="token1time" value="${ person.fbid }" />
    <div class="box-pair boxChoice">
        <div class="photo-choice"><img src="https://graph.facebook.com/${ person.photo }/picture?width=120&height=120" width="120" height="120" alt=""></div>
        <p class="txt-choice"><em>${ person.name }</em>さんとペアを組みます。<br>よろしいですか？</p>
        <div class="btnChoice">
        <p class="btnAgree-choice dblClickDisabled">
            <a href="#" onclick="document.hidForm_84462.submit()">
               決定
            </a></p>
            <p class="btn_disable">
            <a href="#" onclick="return false;">決定</a></p>
            <p class="btnCancel-choice"><a href="#" onClick="window.close(); ">キャンセル</a></p>
            <p class="btn_disable"><a href="#">キャンセル</a></p>
        </div>
    </div>
    </form>

</div>
<!-- ポップアップ箇所 ここまで -->

<script type="text/javascript">
<!--
$(function () {
    $('#choice_84462_popup').magnificPopup({
        type: 'inline',
        preloader: false
    });
    $(document).on('click', '.btnCancel-choice', function (e) {
        e.preventDefault();
        $.magnificPopup.close();
    });
});
// -->
</script>

</body>

</html>

ちなみに、このコードは、まだメチャクチャですよ？提示されたコードを、あくまでも動作確認するために補完しただけです。
そして、スクリプトはコメントで囲むようにしてくださいね？うっかりするとコードが表示されてしまいます。

Comments

[nekora]

私　投稿した覚えもないのに回答したことになってる・・・
システム上のバグかな
わたくしnekoraはこの件に関しては一切投稿していません。

Answer 15

おはようございます

えーと、大変申し上げにくいのですが・・・
めちゃくちゃです＞＜

まぁ、練習でいじり倒していれば当然かぁ・・・

私も、スキルが足りない人間なので、どこまでお力になれるかわかりませんが、がんばってみますので、
しばしお付き合いください。ただし、無能な人間なので、言葉を重ねないとうまく説明できないので
冗長になりますが、どうか、どうかご容赦ください。
現に、少し前に回答した物にマイナス評価もらいました（TT。

まず、ご提示いただいたコードですが、ぱっと見ただけで、jQueryをお使いだということがわかるので
それならば、質問のタグにjQueryを付けるべきです。 あのぅ・・・ jQueryを使っているということを把握されていますよね？もし、把握されていなかったとしたら、ちょっと困ります。

そして、肝心なjQueryのバージョンがいくつなのかをソースで示すなり、質問文内で示していただかないと
皆さん回答に困ります。

次に、よく見れば、Javascript（jQuery）のライブラリを使われてますね？
であれば、その情報も欲しいです。このことも、把握されていますか？

仕方がなかったので、ソースから読み解いて探し回って、使い方を、その場で自分自身をチューニングして対応しました
少し時間を取ってしまいました。たぶん困っておいででしょうから、もう少し早く回答を書きたかったんですけどね＞＜

Comments

[nekora]

ああぁぁ　またやってしまいました。
後になって気づくとは・・・

えっと、私がライブラリと書いているところはプラグインと読み替えてください＞＜
あぁ　恥ずかしいよ

Answer 16

単純に質問として無駄な記述が多く、皆さん解答しきれないようですね。

最初はプラグインでも動かないのかなと思ったんですが、単純にjsをつかってポップアップを実現させたいと、そういう意味だと解釈しました。

そうなるとjQueryを使ったら超絶かんたんですよ。

<!-- ポップアップする為のリンク -->
<a class="btn" href="#target">開く</a>

 <!-- ポップアップ箇所 ここから -->
<div class="popup" id="target" style="display: none">
	内容
	<p class="close"><a href="#">閉じる</a></p>
</div>
<!-- ポップアップ箇所 ここまで -->

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
	// 開く
   $('.btn').click( function(){
		var target = $(this).attr('href');
		$(target).fadeIn();
	});
	//消す
   $('.close').click( function(){
		var $target = $(this).parents('.popup');
		$target.fadeOut();
	});
});
</script>

Comments

[jser]

Dialog要素とポリフィルを使うのはどうですか？
http://demo.agektmr.com/dialog/