JQuery 打开弹出窗口并从单击的链接返回值
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19897521/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
JQuery open popup window and return value from clicked link
提问by
I'm wanting to open a pop up window using JQuery to display a selection of images. The images are wrapped in link tags in an unordered list. There will be some navigation added at some point so I don't think a dialog is appropriate. Here is the code I have so far:
我想使用 JQuery 打开一个弹出窗口来显示一组图像。图像被包装在一个无序列表中的链接标签中。在某些时候会添加一些导航，所以我认为对话框不合适。这是我到目前为止的代码：
Main Page:
主页：
<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>
Popup window:
弹出窗口：
<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>
The first problem I have is that the popup doesn't open, it just opens the image manager in the current browser window. I've got JQuery referenced in the head section of both pages and it works with other JQuery code.
我遇到的第一个问题是弹出窗口没有打开，它只是在当前浏览器窗口中打开图像管理器。我在两个页面的 head 部分都引用了 JQuery，它可以与其他 JQuery 代码一起使用。
Secondly, I tried using plain Javascript to open the popup which worked but I couldn't get the clicked image link to append the image filename to the opener window and the popup wouldn't close afterwards.
其次，我尝试使用普通的 Javascript 打开弹出窗口，但我无法获得单击的图像链接以将图像文件名附加到打开窗口，并且弹出窗口之后不会关闭。
If I can get the popup working how do I pass the {{ image }} variable (Python Bottle template variable) passed when the image in the popup is clicked?
如果我可以让弹出窗口工作，我该如何传递在单击弹出窗口中的图像时传递的 {{ image }} 变量（Python Bottle 模板变量）？
采纳答案by Daved
Okay, let me take a stab: The short and sweet, you need to reference the opened window.
好吧，让我试一试：简短而甜蜜的，你需要参考打开的窗口。
Now, granted, in JSFiddle I am limited since I cannot create multiple documents to load like you have, so this is going to look a little different than yours; sorry. But I CAN create the same effect by modifying the HTML from a hidden div. The hidden div is your "other document."
现在，当然，在 JSFiddle 中我受到限制，因为我无法像您一样创建多个要加载的文档，所以这看起来与您的有点不同；对不起。但是我可以通过修改隐藏 div 中的 HTML 来创建相同的效果。隐藏的 div 是您的“其他文档”。
When you create a new window using window.open, the return is a reference to that window, which is what w and $w are in my code. This is more or less "window" in javascript. So, when you see
当您使用 window.open 创建一个新窗口时，返回的是对该窗口的引用，这就是我的代码中的 w 和 $w 。这或多或少是javascript中的“窗口”。所以，当你看到
$('#imagelist', w.opener.document)
w = window. Although, this does show an alternative way to map the functionality if you wanted, by calling the child document and binding from the parent.
w = 窗口。虽然，这确实显示了一种映射功能的替代方法，如果需要，通过调用子文档并从父文档进行绑定。
Code:
代码：
$('.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>");
});
});
Strings (Fiddle): http://jsfiddle.net/NPyrd/5/
弦乐（小提琴）：http: //jsfiddle.net/NPyrd/5/
