5

I found this great example for modal popup from ericmartin

But I'm trying to use against a datalist of images produced by an ASP.NET repeater and not sure how to make the image dynamic.

The working code is simple but the image is static. It basically pops up th image an darkens the site that called it. it's all happening in javascript and css from that site.

<div id='container'>
    <div id='content'>
        <div id='basic-modal'>
            <a href='#' class='basic'>Demoz</a>
        </div>
        <div id="basic-modal-content">
              <img src="img/basic/127-2777_IMG.JPG" />
        </div>
    </div>
</div>

But my asp.net repeater code needs to somehow get/set the image value but getting "$get is undefined" error in my javascript.

here's my asp.net code:

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

<script type="text/javascript">
    function ShowFullImg(url) {
        var img = $get("<%=Image1.ClientID %>");
            img.src = url;
            //  $find("Image1").show();
        }
</script> 

<div id='container'>

<div id="basic-modal-content">
<asp:Image ID="Image1" runat="server" /> 
</div>


<ASP:DataList id="repeater1"  runat="server" repeatdirection="Horizontal" RepeatLayout="Table" Repeatcolumns="5"> 
<ItemTemplate> 


<asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge"   OnClientClick='<%# Eval("n2","ShowFullImg(\"{0}\");return false;") %>'  runat="server" />                          

</ItemTemplate>
</asp:DataList>
    </div>
</asp:Content>

=== UPDATE: SOME MORE PROGRESS HERE. APPEARS MY ISSUE NOW IS WHEN I BIND AND UPDATE.

http://forums.asp.net/p/1902263/5377638.aspx/1?Re+making+basic+modal+example+dynamic+to+asp+net+datalist+

Here's my rendered code.. I'm getting a blank popup:

   <script type="text/javascript"> 
    function ShowFullImg(url) { 
        var img = $("#Maincontent_Image1"); 
        img.src = url; 
        } 
</script>      

<div id='container'> 


<div id="basic-modal-content"> 
<img id="Maincontent_Image1" src="" /> 
</div> 


 <div id='basic-modal'> 

<table id="Maincontent_repeater1" cellspacing="0" style="border-collapse:collapse;"> 
        <tr> 
                <td> 


<input type="image" name="ctl00$Maincontent$repeater1$ctl00$ThumbnailImg" id="Maincontent_repeater1_ThumbnailImg_0" class="basic
4

3 回答 3

3

这应该可以解决问题，而不必担心呈现的名称。

Datalist 在服务器端处理，以便完全呈现 ImageUrl 路径。这应该在底部留下一个很好的简单 OnClientClick 调用来设置 Image1 src。

此外，我没有看到对 SimpleModal 插件的实际调用，因此我将其添加到 JS 中，因为根据代码片段我根本看不到您是如何获得任何类型的弹出窗口的

<div id="basic-modal-content">
    <asp:Image ID="Image1" ImageUrl="" runat="server" />
</div>

<div id='container'>
    <asp:DataList ID="DataList1" runat="server" RepeatDirection="Horizontal" RepeatColumns="5" >
        <ItemTemplate>
            <asp:ImageButton ID="ThumbnailImg" ImageUrl='<%# Eval("n1") %>' Height="100" Width="150" BorderStyle="Ridge" runat="server" OnClientClick="ShowFullImg(this);" />
        </ItemTemplate>
    </asp:DataList>
</div>

<script type="text/javascript">
    function ShowFullImg(e)
    {
        $('#basic-modal-content img').attr('src',$(e).attr('src'))
        $('#basic-modal-content').modal()
    }
</script>
于 2013-05-09T20:00:48.610 回答
1

你需要在ClientID这里通过，但正确的语法是这样的：

 var img = $("#" + "<%=Image1.ClientID %>");

除此之外，您的代码似乎还不错。确认Eval("n2")生成正确的 URL。您可以添加如下内容：

function ShowFullImg(url) { 
    var img = $("#" + "<%=Image1.ClientID %>"); 
    img.src = url; 
    alert(url);
}
于 2013-05-07T08:46:20.693 回答
1

做这样的事情怎么样：

  1. 更改您的脚本如下：

    function ShowFullImg(url) { 
    var img = $("#Maincontent_Image1"); 
    img.attr("src", url); 
}

  2. 尝试将服务器端 ImageButton 的代码更改为此。

    <asp:ImageButton 
    ID="ThumbnailImg" 
    ImageUrl='<%# Eval("n1") %>' 
    Height="100" Width="150" 
    BorderStyle="Ridge"   
    OnClientClick='<%# "ShowFullImg('" + Eval("n2") + "'); return false;" %>')'   
    runat="server" />

于 2013-05-05T09:10:24.837 回答