Question

找到了这个模态弹出窗口的好例子

但我正在尝试使用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路径。这应该留下一个简单的OnClientClick调用到底部的jquery，它设置了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>

Answer 2

做这样的事情怎么样：

按如下方式更改脚本：

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

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

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

Answer 3

您需要在此处传递ClientID，但正确的语法是这样的：

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

除了你的代码似乎没问题。确认Eval("n2")正在生成正确的网址。您可以添加以下内容：

function ShowFullImg(url) { 
    var img = $("#" + "<%=Image1.ClientID %>"); 
    img.src = url; 
    alert(url);
}

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

3 个答案: