JQuery 打开弹出窗口并从单击的链接返回值
JQuery open popup window and return value from clicked link
我想使用 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 打开有效的弹出窗口,但我无法获得单击的图像链接将图像文件名附加到打开器窗口,并且弹出窗口之后不会关闭。
如果我可以让弹出窗口工作,如何传递单击弹出窗口中的图像时传递的 {{ 图像 }} 变量(Python 瓶模板变量)?
好吧,让我试一试:简短而甜蜜,您需要参考打开的窗口。
现在,当然,在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/
相关文章:
- 将纯文本URL转换为可单击链接
- 阻止在单击链接后转到页面顶部
- 单击链接时停止运行javascript
- 单击链接时如何将引导程序转盘旋转到特定位置
- 通过单击链接(兄弟姐妹?)从无线电输入中获取id
- Jquery UI日期选择器没有'单击链接时不会再次显示
- javascript警报框中的可单击链接
- 停止触摸滚动还可以防止单击链接
- 单击链接时设置cookie
- 如何区分用户单击链接和在 UIWebView 中执行自动重定向的页面
- 使用 jQuery 单击链接时更改链接背景颜色
- 单击链接时添加另一个选项
- 禁用触摸设备上的单击链接未按预期工作
- 如何在单击链接后将局部变量发送到部分呈现
- 单击链接时折叠响应式导航
- 单击链接时取消“点击”JS
- 单击链接后显示加载程序
- 更改类后单击链接将不起作用
- 在PHP代码中单击链接javascript函数调用
- 如何在单击链接时为不同的输入字段提供不同的值