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>
=== 更新: ここでさらに進展があります。私の問題は、バインドして更新するときです。
レンダリングされたコードは次のとおりです。空白のポップアップが表示されます。
<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