6

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>

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

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

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

4

1 に答える 1

5

わかりました、刺してみましょう: 短くて甘いですが、開いているウィンドウを参照する必要があります。

確かに、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/

于 2013-11-11T02:58:19.633 に答える