在jquery thickbox中使用内联内容

时间:2013-05-10 05:37:22

标签: asp.net listview telerik thickbox

我使用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中使用它!

1 个答案:

答案 0 :(得分:0)

: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>