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>

我遇到的第一个问题是弹出窗口没有打开,它只是在当前浏览器窗口中打开图像管理器。我在两个页面的头部都引用了 JQuery,它可以与其他 JQuery 代码一起使用。

其次,我尝试使用纯 Javascript 打开有效的弹出窗口,但我无法获得单击的图像链接以将图像文件名附加到打开器窗口,并且弹出窗口之后不会关闭。

如果我可以让弹出窗口正常工作,如何在单击弹出窗口中的图像时传递 {{ image }} 变量(Python Bottle 模板变量)?

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 回答