中继器内部有多个弹出窗口 [英] Multiple popups inside repeater

查看：156
本文介绍了中继器内部有多个弹出窗口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我正在创建一个移动网站，其中有一份摩托车模型图片列表。我创建了每张图片的列表，作为 list-item ，并在 div > data-rel =popup在列表项目内。一切正常编译和功能，但我单击列表中的任何图像只显示第一个图像。即，当列表中的第三个列表项被点击并且弹出窗口被打开时，显示图像＃1。列表中的每个链接也是如此。

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



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



以下是代码：

 < div data-role =content> 
< div id =SelectedPictorialDivrunat =server> 
< ul data-role =listviewid =SelectedPictorialList> 
< asp：Repeater ID =SelectedPictorialRepeaterrunat =serverDataSourceID =SelectedPictorialSqlDataSource> 
< ItemTemplate> 
< li> 
< a href =＃SinglePicturePopupdata-rel =popup> 
< asp：ImageButton ID =SelectedImageImageButtonrunat =serverImageURL ='<％＃Eval（ImageURL）％>'Width =75px/> 
& nbsp& nbsp;< asp：Label ID =SelectedImageNumberLabelrunat =serverText ='<％＃Eval（ImageNumber）％>'>< / asp：Label> ; 
< asp：HiddenField ID =SelectedImagePictorialNumberHiddenFieldrunat =serverValue ='<％＃Eval（PictorialNumber）％>'/> 
< / a> 
< div id =SinglePicturePopupdata-role =popupdata-overlay-theme =bdata-transition =fadedata-shadow =falsedata-theme =a> ; 
< asp：Image ID =PopupImagerunat =serverImageUrl ='<％＃Eval（ImageURL）％>'Width =100％/> 
< / div> 
< / li> 
< / ItemTemplate> 
< / asp：中继器> 
< / ul> 
< asp：SqlDataSource ID =SelectedPictorialSqlDataSourcerunat =serverConnectionString =<％$ ConnectionStrings：KgIndex％> 
 SelectCommand =SELECT ModelID，ImageURL，ImageNumber，PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber> 
< SelectParameters> 
< asp：QueryStringParameter Name =modelIDQueryStringField =ModelIDType =StringDirection =Input/> 
< asp：QueryStringParameter Name =pictorialNumberQueryStringField =PictorialType =StringDirection =Input/> 
< / SelectParameters> 
< / asp：SqlDataSource> 
< / div> 
< / div>

以下是呈现的HTML：*顶部的jquery是我添加的一部分基于名称浏览列表 

 <！DOCTYPE html> 
 
< html xmlns =http://www.w3.org/1999/xhtml> 
< head>< title> 
 
< / title> 
 
 
 <！ - 标准JQUERY  - > 
< link href =StyleSheet.css =stylesheettype =text / css/>< link href =Styles / StyleSheet.css =stylesheettype =text / css/>< link rel =stylesheettype =text / csshref =http://fonts.googleapis.com/css?family=Tangerine/>< link rel =stylesheet type =text / csshref =http://fonts.googleapis.com/css?family=Tangerine&amp;effect=shadow-multiple|3d-float/> 
< script src =// ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ;</script> 
< script src =JQuery / jquery-ui.js>< / script> 
< script src =JQuery / jquery-ui.min.js>< / script> 
< link rel =stylesheethref =JQuery / jquery-ui.css/>< link rel =stylesheethref =JQuery / jquery-ui.min.css/> < link rel =stylesheethref =JQuery / jquery-ui.theme-smooth.css/>< link rel =stylesheethref =JQuery / jquery-ui.theme.min-smooth.css /> 
 
 
 
 
 <！ -  JQUERY MOBILE  - > 
< link rel =stylesheethref =// ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css/> 
< script src =// ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js\"> ;</script> 
 
< meta name =viewportcontent =width = device-width，initial-scale = 1/>< link rel =stylesheethref =http：// code .jquery.com / mobile / [version] /jquery.mobile-1.4.3.min.css/> 
< script src =http://code.jquery.com/jquery-1.4.3.min.js>< / script> 
< script src =http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.js>< / script> 
 
< script type =text / javascript> 
 $ .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; 
} $ b $ （）; 
 $（＃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< headerheight&&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&& head head> 0&& parseInt（headTop + 
 $ .mobile .window.height（））< parseInt（foot.offset（）。top））{
 $（＃sorter）.css（{
 top：15px，
height：window.innerHeight  -  8 
}）; 
 $（＃sorter li）。height（3.7％）; 
} else if（parseInt（headTop + window.innerHeight）> = parseInt（foot.offset（）.top）&& 
 parseInt（headTop + window.innerHeight）< = parseInt（ foot.height（））{
 $（＃sorter）。css（{
top：15px，
height：window.innerHeight  - （parseInt（headTop + window.innerHeight） -  
 parseInt（foot.offset（）。top）+ 8）
}）; 
} else if（parseInt（headTop + window.innerHeight）> = parseInt（foot.offset（）。top））{
 $（＃sorter）。css（{
 top：15px
}）; 
} else {
 $（＃sorter）.css（top，headerheight + 15）; 
} 
}）; 
}）; $ b $ .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）; 
}）; 
< / script> 
 
< / head> 
< body style =height：100％> 
< form method =postaction =MViewSinglePictorial.aspx？ModelID = 54& amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; amp; 
< div class =aspNetHidden> 
将输入类型= 隐藏 名称= __ VIEWSTATE ID = __ VIEWSTATE 值=NtunFH788MQGLcGyEh8HoEOdwbObwbacfVa / s8udGTFe / UkrCRJNxrRKCnBmeHyR6D35FD / Hva0TbXOMtMY4AoPO7qph / zkehvgprXlu9PO7V9 / p4kjdfu / H + D9cxJTr9HRL4a + IYOQyWlyM5u / h8yUB + NmNevjV79ocimb7ZPhu + RHB / v5j8 + G20jr + qWuL0HJ1KPeEIwT61PWdL + unaFxg0iDBv4yKpJRBt6XZ4w7je7 / HQrW1idea3rrUyP3RRpNdQVgg6rkEQXfzDg1w2FApc5la9MLVmxN5Z54NUxxervspKMIZFQGZ155yxlFRn4HPCJ11XcgjeG8r2nXKT2ybhjip32pSNDBRQpGqL4uoHTix6RJWxGXJQtg3ssK22TX + 8AB9YUNCKa7SCYJzuCDl8Ri3n5A3yQRyYVi4O6K2TmRBgesR8oBNtLVthcPb8lmcsm4kQkJsiXoam8hC3O7CKQmhRcSuq7GkWEaJCKg / 7jYHUOezcUv5g4KYk7U2Mcp / YUcO + g6B7MMWiYBMLn944h6EVEoPtUBWLd36sY1V7RtfWo5KgeXARKZwA5o5RKTCSkDSBlwRu6frjCNL + 11iKY + VKEIMQtDkgeo03eR2xGo1G7MaLfOrrhCDocE0g4zSNVU6AXXI8m7jFC + ca6Rd51b34TAojyC54iYN5g0Qvo6VPKgXqrDOjEBj3wiB4oF3V / HI0JL6K2 + BKQ3C35SihGtNbLr5swq + EkYvNDeDvj8KaS0GNe8wigGzcGChtfrMg7Y5W799xPFIb8hhSToU4czDz69PslwFhLRDyQV02QP + VG + ZWhnWbKaOO + M25BNBRu1OlYPgLzQjRZtPyPkJqBKeX77FQn7MSho + 8oKdKwPsnLdDOJ + YsRKWvX1Rx0Fz7mOJVtTEbKu0ro2miAR1M1xzpYMU ZAYzM7hr0Jzo + 0c4gszyePavEj5cfIotOQ75Qecd2CgHgMum / s7m2VcI30dszd2JsunKv1YEWzN0GT61lAjd + rcn7O3DfI3oEqurABKpiE + R4kfwuBVk7wmxpMTtMKuowVOXVck0MCCaGVt0WzUGiSHLzUbXm0l2PhQt9rUGnyJ3hCnq2oCOtXhgqSMBslfYa8dUzx / VY93vDVkh + 3jhKOfDhCAUg6 + 6l06nybh07E / W2mHYicCEQplwyojMecYywXsAFuh8p8jDXlqdQWKvwhObc1PLTOwgqfo6kbbdhAWSVMTYJzIoxIh3Up / G3Tb9rzZumHlczVhWh3NKsd3uRx6tH9XDnURspHzkSoq + PTpEwQ7yOvieA4wGfWojv / ti6OQ4iZlGGRm9 / IV7 / oyTLQIVoOszz6g0rQmGxaB8CzIaqu8x / uLxXWh + EqBEqy + njoV + UcDUjs9UgV7lmJGUKMT0Fu6fwCZZHwaaJWyPXr / + UTwIT8h / ZCFAg4Et5ErRUKRdZjh78FUIEuE0Kam0ovpwgkGtQ + aWGQAp18dgs8ofwcODrN1ULELf / AonI05kZT0Ucg9L1bdsiSoaMXP9g + PwUWRpproGafMMytF / fSvbESmcFt + GJw2lgfPFgaEZe1uR8A3PgSSmtLNqmi + 0szL39ob2U67qdqWbtsU2HoBTqaf2WWsjf1mdQpUsZFPhTVRB9KiZosWoKXyChuhjEzkdWoH / PgjYN + 0lRPhTZL4mteJpAfqGvA ==/> 
< / div> 
 
 
< script type =text / javascript> 
函数ViewSingleImage（selectedDetails）{
 // array [0] =图片编号
 // array [1] =图片编号
 //数组[2] = modelID 
 var array = selectedDetails.split（'，'）; 
 window.location.href =MViewSinglePicture.aspx？ModelID =+ array [2] +& pictorial =+ array [1] +& image =+ array [0]; 
 
 
函数重定向（位置）{
 if（location ==Dashboard）{
 window.location.href =MDashboard.aspx; 
} 
 else if（location ==Models）{
 window.location.href =MViewModels.aspx; 
} 
} 
< / script> 
< div id =MainContent_MainPagedata-role =pagedata-url =MainPagestyle =height：100％data-theme =a> 
< div data-role =headerdata-theme =bdata-position =fixed> 
< div data-role =navbarclass =ui-icon-heartdata-grid =b> 
< ul> 
< li>< a id =HomeAclass =ui-icon-homeonclick =Redirect（'Dashboard'）;数据图标= 定制 >< / A>< /锂> 
< li>< a id =ModelsAclass =ui-icon-bulletsonclick =Redirect（'Models'）;数据图标= 定制 >< / A>< /锂> 
< li>< a id =SearchModelsAclass =ui-icon-searchonclick =Redirect（'Models'）;数据图标= 定制 >< / A>< /锂> 
< / ul> 
< / div> 
< / div> 
< div data-role =mainclass =ui-content> 
< div data-role =body> 
< p>图片< / p> 
 
< div data-role =content> 
< div id =MainContent_SelectedPictorialDiv> 
< ul data-role =listviewid =SelectedPictorialList> 
 
< li> 
< a href =＃SinglePicturePopupdata-rel =popup> 
< input type =imagename =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl00 $ SelectedImageImageButtonid =MainContent_SelectedPictorialRepeater_SelectedImageImageButton_0src =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/2vhvt3n.jpgstyle =width：75px; /> 
& nbsp& nbsp;< span id =MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_0> 1< / span> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl00 $ SelectedImageURLHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_0value =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/2vhvt3n.jpg/> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl00 $ SelectedImagePictorialNumberHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_0value =1/> 
< / a> 
< div id =SinglePicturePopupdata-role =popupdata-overlay-theme =bdata-transition =fadedata-shadow =falsedata-theme =a> ; 
< img id =MainContent_SelectedPictorialRepeater_PopupSingleImage_0src =https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpgstyle =width：200px; /> 
< / div> 
< / li> 
 
< li> 
< a href =＃SinglePicturePopupdata-rel =popup> 
< input type =imagename =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl01 $ SelectedImageImageButtonid =MainContent_SelectedPictorialRepeater_SelectedImageImageButton_1src =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/Mladin-leads-Fontana-1.jpgstyle =width：75px; /> 
& nbsp& nbsp;< span id =MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_1> 2< / span> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl01 $ SelectedImageURLHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_1value =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/Mladin-leads-Fontana-1.jpg/> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl01 $ SelectedImagePictorialNumberHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_1value =1/> 
< / a> 
< div id =SinglePicturePopupdata-role =popupdata-overlay-theme =bdata-transition =fadedata-shadow =falsedata-theme =a> ; 
< img id =MainContent_SelectedPictorialRepeater_PopupSingleImage_1src =https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpgstyle =宽度：200像素; /> 
< / div> 
< / li> 
 
< li> 
< a href =＃SinglePicturePopupdata-rel =popup> 
< input type =imagename =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl02 $ SelectedImageImageButtonid =MainContent_SelectedPictorialRepeater_SelectedImageImageButton_2src =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpgstyle =width：75px; /> 
& nbsp& nbsp;< span id =MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_2> 3< / span> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl02 $ SelectedImageURLHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_2value =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg/> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl02 $ SelectedImagePictorialNumberHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_2value =1/> 
< / a> 
< div id =SinglePicturePopupdata-role =popupdata-overlay-theme =bdata-transition =fadedata-shadow =falsedata-theme =a> ; 
< img id =MainContent_SelectedPictorialRepeater_PopupSingleImage_2src =https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpgstyle =width：200px; /> 
< / div> 
< / li> 
 
< li> 
< a href =＃SinglePicturePopupdata-rel =popup> 
< input type =imagename =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl03 $ SelectedImageImageButtonid =MainContent_SelectedPictorialRepeater_SelectedImageImageButton_3src =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/bmw.jpgstyle =width：75px; /> 
& nbsp& nbsp;< span id =MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_3> 4< / span> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl03 $ SelectedImageURLHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_3value =https://s3-us-west-1.amazonaws.com/kgsite /Test/1/bmw.jpg/> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialRepeater $ ctl03 $ SelectedImagePictorialNumberHiddenFieldid =MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_3value =1/> 
< / a> 
< div id =SinglePicturePopupdata-role =popupdata-overlay-theme =bdata-transition =fadedata-shadow =falsedata-theme =a> ; 
< img id =MainContent_SelectedPictorialRepeater_PopupSingleImage_3src =https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpgstyle =width：200px; /> 
< / div> 
< / li> 
 
< / ul> 
 
 
< span id =MainContent_SelectedPictorialLabel>< / span> 
< input type =hiddenname =ctl00 $ MainContent $ ModelIDHiddenFieldid =MainContent_ModelIDHiddenField/> 
< input type =hiddenname =ctl00 $ MainContent $ SelectedPictorialHiddenFieldid =MainContent_SelectedPictorialHiddenField/> 
< / div> 
< / div> 
< / div> 
< / div> 
< / div> 
 
 
< div class =aspNetHidden> 
 
将输入类型= 隐藏 名称= __ EVENTVALIDATION ID = __ EVENTVALIDATION 值=rcVSDhHOh / VCV4xvZW1xySlgIk + aKBCHWnqXQ / hbRyJ3Q + 19pQPrrjB8bdWGFG8Os0xdxZMZQZINDmkHDm1 + 4DTPwLkjXqC + 3lHpYvBzjNOAZSPI9ZLjeK7GpS / Qqwlzw + yGLFoO7IPk2hVzdFndH4en1nBGJuB3fF5 + / jPr8dUi7oHYnloqnnYr1bmoqJMyYqf / iAf4gr9vfMA4L7LhvOqOMx / MaTeuTZDXFwjkROfwODzrE3fNaT8UCGvRPeRtR6z1xhfSzsZX6 / YrPxrfP8pAzqmM / WcxvQvjwgS9G + VPdoByMI1vbqLLRgmT2C0T4HrkHC54DZCHQuIy3NqZB8woDZP5pe2jjOJF44LeTwngdosmRqjwIsN1QMXoFh24fi3TVmnXm3jHyJCmRa51wA == /> 
< / div>< / form> 
 
<！ -  Visual Studio Browser Link  - > 
< script type =application / jsonid =__ browserLink_initializationData> 
 {appName：Chrome，requestId：c17b133f1b354c05bd3175a66999aee5} 
< / script> 
< script type =text / javascriptsrc =http：// localhost：54681 / 00b84f193a774765ab59c6705f4e8d6b / browserLinkasync =async>< / script> 
<！ - 结束浏览器连结 - > 
 
< / body> 
< / html>


解决方案

与其创建多个弹出窗口来实现相同的目的，您可以简单地创建一个全局弹出窗口并根据点击的 listview 项目更新它的内容。 给所有 listview 项目 class ，并在页面的 pagecrate 上附加一个 event 侦听器。

 < li> 
< a href =＃class =thumb> 
< input type =imagesrc =img.jpg/> 
< / a> 
< / li>

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

 < div id =myPopupdata-role =popupdata-overlay-theme =bdata-transition =fadedata- shadow =falsedata-theme =a> 
< / div>

一旦 listview 项目收到一个事件 ，检索 popup ， listview项目和图片src 。将检索到的图片插入到弹出窗口中，然后在图片加载后打开它，以确保弹出窗口位于 listview项目。



$ $ p $ code $ $（document）.on（pagecreate，#pageID，function（）{
/ *附加事件监听器* /
$（。thumb）。on（click，function（e）{
/ * retrieve data * /
var popup = $（＃myPopup），
elm = $（this），
img = $（input，elm）.attr（src）;
/ *将img插入弹出窗口并打开它* /
popup.html （$（< img />，{
src：img
}）。one（load，function（e）{
popup.popup（open， {
positionTo：elm
}）;
}））;

}）;
}）;




演示


I am creating a mobile site where I have a list of pictorials of motorcycle models. I created the list with each image as a list-item and also added a div with the data-rel="popup" inside the list-item. Everything compiles and functions correctly, but any image I click in the list only shows the first image. I.e., when the 3rd list-item in the list is clicked and the popup is opened, image #1 is displayed. This is also true for every link in the list.

Do you know why it is doing this? I know I can go around this by creating another jquery page and just redirect to that, but it's much cleaner having the popup and I'm curious how to get the correct image to display, or if I'm overlooking something?

All the images and data are stored in a sql server database

Here is the code:

<div data-role="content">
    <div id="SelectedPictorialDiv" runat="server">
        <ul data-role="listview" id="SelectedPictorialList">
            <asp:Repeater ID="SelectedPictorialRepeater" runat="server" DataSourceID="SelectedPictorialSqlDataSource"> 
                <ItemTemplate>
                    <li>
                        <a href="#SinglePicturePopup" data-rel="popup"> 
                            <asp:ImageButton ID="SelectedImageImageButton" runat="server" ImageURL='<%# Eval("ImageURL") %>' Width="75px" />
                            &nbsp&nbsp;<asp:Label ID="SelectedImageNumberLabel" runat="server" Text='<%# Eval("ImageNumber") %>'></asp:Label>
                            <asp:HiddenField ID="SelectedImagePictorialNumberHiddenField" runat="server" Value='<%# Eval("PictorialNumber") %>' />
                        </a>
                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                            <asp:Image ID="PopupImage" runat="server" ImageUrl='<%# Eval("ImageURL") %>' Width="100%" />
                        </div>
                    </li>
                </ItemTemplate>
            </asp:Repeater>
        </ul>
        <asp:SqlDataSource ID="SelectedPictorialSqlDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:KgIndex %>" 
            SelectCommand="SELECT ModelID, ImageURL, ImageNumber, PictorialNumber FROM Test_Models_Image WHERE ModelID = @modelID AND PictorialNumber = @pictorialNumber ORDER BY ImageNumber" >
            <SelectParameters>
                <asp:QueryStringParameter Name="modelID" QueryStringField="ModelID" Type="String" Direction="Input" />
                <asp:QueryStringParameter Name="pictorialNumber" QueryStringField="Pictorial" Type="String" Direction="Input" />
            </SelectParameters>
        </asp:SqlDataSource>
    </div>
</div>

Here is the rendered HTML: *the jquery at the top is part of an addition that I'm working on for navigating the list based on name

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>

</title>


    <!--STANDARD JQUERY-->
    <link href="StyleSheet.css" rel="stylesheet" type="text/css" /><link href="Styles/StyleSheet.css" rel="stylesheet" type="text/css" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine" /><link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine&amp;effect=shadow-multiple|3d-float" />
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <script src="JQuery/jquery-ui.js"></script>
    <script src="JQuery/jquery-ui.min.js"></script>
    <link rel="stylesheet" href="JQuery/jquery-ui.css" /><link rel="stylesheet" href="JQuery/jquery-ui.min.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme-smooth.css" /><link rel="stylesheet" href="JQuery/jquery-ui.theme.min-smooth.css" />




    <!--JQUERY MOBILE-->
    <link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.css" />
    <script src="//ajax.googleapis.com/ajax/libs/jquerymobile/1.4.3/jquery.mobile.min.js"></script>

    <meta name="viewport" content="width=device-width, initial-scale=1" /><link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/[version]/jquery.mobile-1.4.3.min.js"></script>

    <script type="text/javascript">
        $.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 < headerheight && 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)) {
                    $("#sorter").css({
                        "top": "15px",
                        "height": window.innerHeight - 8
                    });
                    $("#sorter li").height("3.7%");
                } else if (parseInt(headTop + window.innerHeight) >= parseInt(foot.offset().top) &&
                    parseInt(headTop + window.innerHeight) <= parseInt(foot.offset().top) +
                    foot.height()) {
                    $("#sorter").css({
                        "top": "15px",
                        "height": window.innerHeight - (parseInt(headTop + window.innerHeight) -
                            parseInt(foot.offset().top) + 8)
                    });
                } else if (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);
        });
    </script>

</head>
<body style="height: 100%">
    <form method="post" action="MViewSinglePictorial.aspx?ModelID=54&amp;Pictorial=1" id="form1">
<div class="aspNetHidden">
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="NtunFH788MQGLcGyEh8HoEOdwbObwbacfVa/s8udGTFe/UkrCRJNxrRKCnBmeHyR6D35FD/Hva0TbXOMtMY4AoPO7qph/zkehvgprXlu9PO7V9/p4kjdfu/H+D9cxJTr9HRL4a+IYOQyWlyM5u/h8yUB+NmNevjV79ocimb7ZPhu+rHb/v5j8+G20jr+qWuL0HJ1KPeEIwT61PWdL+unaFxg0iDBv4yKpJRBt6XZ4w7je7/HQrW1idea3rrUyP3RRpNdQVgg6rkEQXfzDg1w2FApc5la9MLVmxN5Z54NUxxervspKMIZFQGZ155yxlFRn4HPCJ11XcgjeG8r2nXKT2ybhjip32pSNDBRQpGqL4uoHTix6RJWxGXJQtg3ssK22TX+8AB9YUNCKa7SCYJzuCDl8Ri3n5A3yQRyYVi4O6K2TmRBgesR8oBNtLVthcPb8lmcsm4kQkJsiXoam8hC3O7CKQmhRcSuq7GkWEaJCKg/7jYHUOezcUv5g4KYk7U2Mcp/YUcO+g6B7MMWiYBMLn944h6EVEoPtUBWLd36sY1V7RtfWo5KgeXARKZwA5o5RKTCSkDSBlwRu6frjCNL+11iKY+VKEIMQtDkgeo03eR2xGo1G7MaLfOrrhCDocE0g4zSNVU6AXXI8m7jFC+ca6Rd51b34TAojyC54iYN5g0Qvo6VPKgXqrDOjEBj3wiB4oF3V/HI0JL6K2+BKQ3C35SihGtNbLr5swq+EkYvNDeDvj8KaS0GNe8wigGzcGChtfrMg7Y5W799xPFIb8hhSToU4czDz69PslwFhLRDyQV02QP+vg+ZWhnWbKaOO+M25BNBRu1OlYPgLzQjRZtPyPkJqBKeX77FQn7MSho+8oKdKwPsnLdDOJ+YsRKWvX1Rx0Fz7mOJVtTEbKu0ro2miAR1M1xzpYMUZAYzM7hr0Jzo+0c4gszyePavEj5cfIotOQ75Qecd2CgHgMum/s7m2VcI30dszd2JsunKv1YEWzN0GT61lAjd+rcn7O3DfI3oEqurABKpiE+R4kfwuBVk7wmxpMTtMKuowVOXVck0MCCaGVt0WzUGiSHLzUbXm0l2PhQt9rUGnyJ3hCnq2oCOtXhgqSMBslfYa8dUzx/VY93vDVkh+3jhKOfDhCAUg6+6l06nybh07E/W2mHYicCEQplwyojMecYywXsAFuh8p8jDXlqdQWKvwhObc1PLTOwgqfo6kbbdhAWSVMTYJzIoxIh3Up/G3Tb9rzZumHlczVhWh3NKsd3uRx6tH9XDnURspHzkSoq+PTpEwQ7yOvieA4wGfWojv/ti6OQ4iZlGGRm9/IV7/oyTLQIVoOszz6g0rQmGxaB8CzIaqu8x/uLxXWh+EqBEqy+njoV+UcDUjs9UgV7lmJGUKMT0Fu6fwCZZHwaaJWyPXr/+UTwIT8h/ZCFAg4Et5ErRUKRdZjh78FUIEuE0Kam0ovpwgkGtQ+aWGQAp18dgs8ofwcODrN1ULELf/AonI05kZT0Ucg9L1bdsiSoaMXP9g+PwUWRpproGafMMytF/fSvbESmcFt+GJw2lgfPFgaEZe1uR8A3PgSSmtLNqmi+0szL39ob2U67qdqWbtsU2HoBTqaf2WWsjf1mdQpUsZFPhTVRB9KiZosWoKXyChuhjEzkdWoH/PgjYN+0lRPhTZL4mteJpAfqGvA==" />
</div>


    <script type="text/javascript">
        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";
            }
        }
    </script>
    <div id="MainContent_MainPage" data-role="page" data-url="MainPage" style="height: 100%" data-theme="a">
        <div data-role="header" data-theme="b" data-position="fixed">
            <div data-role="navbar" class="ui-icon-heart" data-grid="b">
            <ul>
                <li><a id="HomeA" class="ui-icon-home" onclick="Redirect('Dashboard');" data-icon="custom"></a></li>
                <li><a id="ModelsA" class="ui-icon-bullets" onclick="Redirect('Models');" data-icon="custom"></a></li>
                <li><a id="SearchModelsA" class="ui-icon-search" onclick="Redirect('Models');" data-icon="custom"></a></li>
            </ul>
            </div>
        </div>
        <div data-role="main" class="ui-content">
            <div data-role="body">
                <p>Images</p>

                <div data-role="content">
                    <div id="MainContent_SelectedPictorialDiv">
                        <ul data-role="listview" id="SelectedPictorialList">

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_0">1</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_0" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl00$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_0" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_0" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/2vhvt3n.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_1">2</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_1" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl01$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_1" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_1" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Mladin-leads-Fontana-1.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_2">3</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_2" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl02$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_2" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_2" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/Nissan_Rogue_Towing_Motorcycle_Trailer.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                                    <li>
                                        <a href="#SinglePicturePopup" data-rel="popup">
                                            <input type="image" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageImageButton" id="MainContent_SelectedPictorialRepeater_SelectedImageImageButton_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:75px;" />
                                            &nbsp&nbsp;<span id="MainContent_SelectedPictorialRepeater_SelectedImageNumberLabel_3">4</span>
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImageURLHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImageURLHiddenField_3" value="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" />
                                            <input type="hidden" name="ctl00$MainContent$SelectedPictorialRepeater$ctl03$SelectedImagePictorialNumberHiddenField" id="MainContent_SelectedPictorialRepeater_SelectedImagePictorialNumberHiddenField_3" value="1" />
                                        </a>
                                        <div id="SinglePicturePopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
                                            <img id="MainContent_SelectedPictorialRepeater_PopupSingleImage_3" src="https://s3-us-west-1.amazonaws.com/kgsite/Test/1/bmw.jpg" style="width:200px;" />
                                        </div>
                                    </li>

                        </ul>


                        <span id="MainContent_SelectedPictorialLabel"></span>
                        <input type="hidden" name="ctl00$MainContent$ModelIDHiddenField" id="MainContent_ModelIDHiddenField" />
                        <input type="hidden" name="ctl00$MainContent$SelectedPictorialHiddenField" id="MainContent_SelectedPictorialHiddenField" />
                    </div>
                </div>
            </div>
        </div>
    </div>


<div class="aspNetHidden">

    <input type="hidden" name="__EVENTVALIDATION" id="__EVENTVALIDATION" value="rcVSDhHOh/VCV4xvZW1xySlgIk+aKBCHWnqXQ/hbRyJ3Q+19pQPrrjB8bdWGFG8Os0xdxZMZQZINDmkHDm1+4DTPwLkjXqC+3lHpYvBzjNOAZSPI9ZLjeK7GpS/Qqwlzw+yGLFoO7IPk2hVzdFndH4en1nBGJuB3fF5+/jPr8dUi7oHYnloqnnYr1bmoqJMyYqf/iAf4gr9vfMA4L7LhvOqOMx/MaTeuTZDXFwjkROfwODzrE3fNaT8UCGvRPeRtR6z1xhfSzsZX6/YrPxrfP8pAzqmM/WcxvQvjwgS9G+VPdoByMI1vbqLLRgmT2C0T4HrkHC54DZCHQuIy3NqZB8woDZP5pe2jjOJF44LeTwngdosmRqjwIsN1QMXoFh24fi3TVmnXm3jHyJCmRa51wA==" />
</div></form>

<!-- Visual Studio Browser Link -->
<script type="application/json" id="__browserLink_initializationData">
    {"appName":"Chrome","requestId":"c17b133f1b354c05bd3175a66999aee5"}
</script>
<script type="text/javascript" src="http://localhost:54681/00b84f193a774765ab59c6705f4e8d6b/browserLink" async="async"></script>
<!-- End Browser Link -->

</body>
</html>

解决方案

Instead of creating multiple popups to serve the same purpose, you can simply create one global popup and update its' content based on clicked listview item.

Give all listview items a class and attach an event listener on pagecrate of the page.

<li>
   <a href="#" class="thumb">
      <input type="image" src="img.jpg"/>
   </a>
</li>

Create a popup inside page div.

<div id="myPopup" data-role="popup" data-overlay-theme="b" data-transition="fade" data-shadow="false" data-theme="a">
</div>

Once a listview item received an event, retrieve popup, listview item and image src. Insert the retrieved image into the popup and then open it once image is loaded to ensure that the popup is positioned to the listview item.

$(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($("<img/>", {
            src: img
        }).one("load", function (e) {
            popup.popup("open", {
                positionTo: elm
            });
        }));

    });
});

Demo

这篇关于中继器内部有多个弹出窗口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
C#/.NET最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆