尝试将Simple Modal示例改编为asp.net datalist中继器

Question

我发现了ericmartin的模态弹出窗口这个很好的例子

但我正在尝试使用ASP.NET转发器生成的图像的数据主义者,而不确定如何使图像动态化.

工作代码很简单,但图像是静态的.它基本上会弹出图像,使调用它的网站变暗.这一切都发生在该网站的javascript和css中.

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

但是我的asp.net转发器代码需要以某种方式获取/设置图像值,但在我的javascript中得到"$ get is undefined"错误.

这是我的asp.net代码:

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

=== 更新:这里有一些进展.现在出现我的问题是我何时更新和更新.

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

这是我渲染的代码..我得到一个空白的弹出窗口:

   <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

Answer 1

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

Datalist 在服务器端处理，以便完全呈现 ImageUrl 路径。这应该在底部留下一个对 jquery 的简单 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>