Question

我使用JQuery ThickBox 3.1，这是我的代码

  <telerik:RadListView runat="server" ID="myDataList" AllowPaging="true"  
   DataKeyNames="id" ItemPlaceholderID="PlaceHolder1"  
   NeedDataSource="list_DataRebind">
        <LayoutTemplate>
            <div class="sushibar">
                <asp:Panel ID="SushiPanel" runat="server">
                    <div class="sushi">
                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"></asp:PlaceHolder>
                    </div>
                    <telerik:RadDataPager ID="RadDataPager1" runat="server" PageSize="4" PagedControlID="myDataList">
                        <Fields>
                            <telerik:RadDataPagerButtonField />
                            <telerik:RadDataPagerPageSizeField />
                            <telerik:RadDataPagerSliderField />
                        </Fields>
                    </telerik:RadDataPager>
                </asp:Panel>
            </div>
        </LayoutTemplate>
        <ItemTemplate>
            <div class="imageDiv">
                <span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
                    <%#Eval("Title") %></span>
                <br />
                <a href='<%#Eval("ImagePath")%>' title='<%#Eval("Title")%>' class="thickbox" >
                    <img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
        </ItemTemplate>
    </telerik:RadListView>

带有图像和标题的弹出框正确显示，但我有另一个字段（<%#Eval("Description")%>）与它一起显示！
我找到了如何在Thickbox中显示内联内容，

<input alt="#TB_inline?height=300&width=400&inlineId=myOnPageContent" title="add a  
 caption to title attribute / or leave blank" class="thickbox" type="button"     value="Show" />
<a href="#TB_inline?height=155&width=300&inlineId=hiddenModalContent&modal=true"  
class="thickbox">Show hidden modal content.</a>

但我不知道如何在ListView中使用它！

Answer 1

：D，我找到了答案！只需将内容（图像+描述）放入隐藏的部门（带Display:none的样式）并将此div id设置为inlineId。

        <ItemTemplate>
            <div class="imageDiv">
                <span style="margin-bottom: 5px; display: block; color: #FF6600; font-weight: bold;">
                    <%#Eval("Title") %></span>
                <br />
                <div id="popUpRegion" style="display: none">
                    <img src='<%#Eval("ImagePath")%>' alt="Single Image"  width="500px" height="600px" />
                    <p>
                        <%#Eval("Description")%></p>
                </div>
                <a href="#TB_inline?height=800&width=600&inlineId=popUpRegion" title='<%#Eval("Title")%>'
                    class="thickbox">
                    <img src='<%#Eval("ImagePath")%>' alt="Single Image" width="150px" height="200px" /></a></div>
        </ItemTemplate>

在jquery thickbox中使用内联内容

1 个答案: