转发器内有多个弹出窗口

我正在创建一个移动网站，我有一个摩托车模型的图片列表。 我创建了列表，每个图像作为list-item并在list-item添加了一个带有data-rel="popup"的div 。 一切都正确编译和运行，但我在列表中单击的任何图像只显示第一个图像。 即，当单击列表中的第3个列表项并打开弹出窗口时，将显示图像＃1。 对于列表中的每个链接也是如此。

你知道为什么这样做吗？ 我知道我可以通过创建另一个jquery页面然后重定向到那个来解决这个问题，但是弹出窗口更清晰，我很好奇如何显示正确的图像，或者我是否忽略了什么？

所有图像和数据都存储在sql server数据库中

这是代码：

 
 
 
   
  <asp:ImageButton ID="SelectedImageImageButton" runat="server" ImageURL='' Width="75px" /> &nbsp <asp:Label ID="SelectedImageNumberLabel" runat="server" Text=''> <asp:HiddenField ID="SelectedImagePictorialNumberHiddenField" runat="server" Value='' />  
 <asp:Image ID="PopupImage" runat="server" ImageUrl='' Width="100%" /> 
 
   
 <asp:SqlDataSource ID="SelectedPictorialSqlDataSource" runat="server" ConnectionString="" SelectCommand="SELECT ModelID, ImageURL, ImageNumber, PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber" >      
  

这是呈现的HTML：*顶部的jquery是我正在努力根据名称导航列表的一部分

                 $.mobile.document.on("pagecreate", "#MainPage", function () { var head = $(".ui-page-active [data-role='header']"); $.mobile.document.on("click", "#sorter li", function () { var top, letter = $(this).text(), divider = $("#sortedList").find("li.ui-li-divider:contains(" + letter + ")"); if (divider.length > 0) { top = divider.offset().top; $.mobile.silentScroll(top); } else { return false; } }); $("#sorter li").hover(function () { $(this).addClass("ui-btn").removeClass("ui-li-static"); }, function () { $(this).removeClass("ui-btn").addClass("ui-li-static"); }); }); $(function () { $.mobile.window.on("scroll", function (e) { var headTop = $(window).scrollTop(), foot = $(".ui-page-active [data-role='footer']"), head = $(".ui-page-active [data-role='header']"), headerheight = head.outerHeight(); if (headTop  0) { $("#sorter").css({ "top": headerheight + 15 - headTop, "height": window.innerHeight - head[0].offsetHeight + window.pageYOffset - 10 }); $("#sorter li").height("3.7%"); } else if (headTop >= headerheight && headTop > 0 && parseInt(headTop + $.mobile.window.height()) = parseInt(foot.offset().top) && parseInt(headTop + window.innerHeight) = parseInt(foot.offset().top)) { $("#sorter").css({ "top": "15px" }); } else { $("#sorter").css("top", headerheight + 15); } }); }); $.mobile.window.on("throttledresize", function () { $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18); }); $.mobile.document.on("pageshow", "#MainPage", function () { var headerheight = $(".ui-page-active [data-role='header']").outerHeight(); $("#sorter").height(window.innerHeight - headerheight - 20).css("top", headerheight + 18); });    
 
  
  function ViewSingleImage(selectedDetails) { //array[0] = image number //array[1] = pictorialNumber //array[2] = modelID var array = selectedDetails.split(','); window.location.href = "MViewSinglePicture.aspx?ModelID=" + array[2] + "&pictorial=" + array[1] + "&image=" + array[0]; } function Redirect(location) { if (location == "Dashboard") { window.location.href = "MDashboard.aspx"; } else if (location == "Models") { window.location.href = "MViewModels.aspx"; } }  
 
 
 
 
 
 
 
 
 
 
 
 
Images
 
 
 
 
   &nbsp 1    
  
 
 
   &nbsp 2    
  
 
 
   &nbsp 3    
  
 
 
   &nbsp 4    
  
 
 
    
 
 
 
 
 
  
   {"appName":"Chrome","requestId":"c17b133f1b354c05bd3175a66999aee5"}      

Answer 1

您可以简单地创建一个全局弹出窗口并根据单击的列表视图项目更新其内容，而不是创建多个弹出窗口来实现相同的目的。

为所有listview项提供一个class并在页面的pagecrate上附加一个事件监听器。

在页面div中创建一个弹出窗口。

列表视图项收到事件后 ，检索弹出窗口 ， 列表视图项和图像src 。 将检索到的图像插入弹出窗口 ，然后在加载图像后将其打开，以确保弹出窗口位于listview项目 。

 $(document).on("pagecreate", "#pageID", function () { /* attach event listener */ $(".thumb").on("click", function (e) { /* retrieve data */ var popup = $("#myPopup"), elm = $(this), img = $("input", elm).attr("src"); /* insert img into popup and the open it */ popup.html($("", { src: img }).one("load", function (e) { popup.popup("open", { positionTo: elm }); })); }); }); 

演示