JQuery打开弹出窗口并从点击的链接返回值

Question

我想用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 Bottle模板变量）？

Answer 1

好吧，让我采取刺：短而甜，你需要参考打开的窗口。

现在，在JSFiddle中，我被限制，因为我不能像你一样创建多个文档来加载，所以这看起来与你的有点不同; 抱歉。 但我可以通过修改隐藏div中的HTML来创建相同的效果。 隐藏的div是你的“其他文档”。

当您使用window.open创建一个新窗口时，return是对该窗口的引用，这就是我的代码中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/