5

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+make+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
4

3 に答える 3

3

これにより、レンダリングされた名前を気にすることなくうまくいくはずです。

ImageUrl パスが完全にレンダリングされるように、Datalist はサーバー側で処理されます。これにより、Image1 src を設定する jquery へのシンプルな OnClientClick 呼び出しが一番下に残るはずです。

また、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 に答える