[英]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>
我遇到的第一個問題是彈出窗口沒有打開,它只是在當前瀏覽器窗口中打開圖像管理器。 我在兩個頁面的head部分都引用了JQuery,它可以與其他JQuery代碼一起使用。
其次,我嘗試使用普通的Javascript來打開有效的彈出窗口,但我無法獲得點擊的圖像鏈接將圖像文件名附加到開啟窗口,然后彈出窗口不會關閉。
如果我可以讓彈出窗口工作,如何在彈出單擊彈出窗口中的圖像時傳遞{{image}}變量(Python Bottle模板變量)?
好吧,讓我采取刺:短而甜,你需要參考打開的窗口。
現在,在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/
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.