web-dev-qa-db-ja.com

JQueryはポップアップウィンドウを開き、クリックされたリンクから値を返します

JQueryを使用してポップアップウィンドウを開き、選択した画像を表示したいと思います。画像は、順序付けられていないリストのリンクタグでラップされます。ある時点でナビゲーションが追加されるので、ダイアログは適切ではないと思います。これが私がこれまでに持っているコードです：

メインページ：

<script>
    $('.ImageManager').click(function (event) {
        event.preventDefault();
        window.open($(this).attr("href"), "popupWindow", "width=600, height=400, scrollbars=yes");
    });
</script>


<a href="/image-manager" class="ImageManager">Add Image</a><br />
<ul id="imagelist">
</ul>

ポップアップウィンドウ：

<script>
    $(function() {
        $(".addimage").click(function() {
            $("#imagelist", opener.document).append("<li></li>");
            return false;
        });
    });
</script>


<ul>
% for image in images:
<li><a href="" class="addimage"><img src="/static/images/{{ image }}" alt="" /></a></li>
% end
</ul>

私が抱えている最初の問題は、ポップアップが開かず、現在のブラウザウィンドウで画像マネージャを開くだけであるということです。両方のページのヘッドセクションでJQueryが参照されており、他のJQueryコードで機能します。

次に、プレーンなJavascriptを使用してポップアップを開こうとしましたが、クリックした画像リンクを取得して画像ファイル名をオープナーウィンドウに追加できず、その後ポップアップが閉じませんでした。

ポップアップを機能させることができる場合、ポップアップ内の画像がクリックされたときに渡される{{image}}変数（Pythonボトルテンプレート変数）を渡すにはどうすればよいですか？

javascriptjquerypopupappendelement
6
user521836

さて、私に刺してみましょう：短くて甘い、あなたは開いたウィンドウを参照する必要があります。

確かに、JSFiddleでは、ロードする複数のドキュメントを作成できないため、制限があります。そのため、これはあなたのドキュメントとは少し異なって見えます。ごめんなさい。しかし、非表示のdivからHTMLを変更することで、同じ効果を作成できます。非表示のdivは「他のドキュメント」です。

Window.openを使用して新しいウィンドウを作成すると、戻り値はそのウィンドウへの参照になります。これは、私のコードのwと$ wです。これは多かれ少なかれjavascriptの「ウィンドウ」です。だから、あなたが見るとき

$('#imagelist', w.opener.document)

w =ウィンドウ。ただし、これは、必要に応じて、子ドキュメントを呼び出して親からバインドすることにより、機能をマップする別の方法を示しています。

コード：

$('.ImageManager').click(function (event) {
    event.preventDefault();
    var w = window.open("", "popupWindow", "width=600, height=400, scrollbars=yes");
    var $w = $(w.document.body);
    $w.html($('#modalText').html());
    $w.find(".addimage").click(function(e) {
        e.preventDefault();
        console.log(w.opener.document);
        $("#imagelist", w.opener.document).append("<li></li>");
    });
});

文字列（フィドル）： http://jsfiddle.net/NPyrd/5/

5
Daved