弹出一个简单的带一张图片DIV层，帮我看看代码

老板想实现这种效果。一点链接就能弹出一个带图片DIV层，图片地址是从后台数据库读出来的。
这个是演示例子。
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>LIGHTBOX EXAMPLE</title>
    <style type="text/css">
  .black_overlay {  display: none;  position: absolute;  top: 0%;  left: 0%;  width: 100%;  height: 100%;  background-color: black;  z-index:1001;  -moz-opacity: 0.8;  opacity:.80;  filter: alpha(opacity=80);  } 
  .white_content {  display: none;  position: absolute;  top: 25%;  left: 25%;  width: 50%;  height: 50%;  padding: 16px;  border: 16px solid orange;  background-color: white;  z-index:1002;  overflow: auto;  }  
  </style>
</head>
<body>
    
     <p><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">NOKIA N95</a></p>
           
    
    <div id="light" class="white_content" style="text-align: center">
        <asp:Image ID="Image1" runat="server" ImageAlign="Middle" ImageUrl="http://www.iptimetv.com/phonemodel/Phone/NokiaN95.jpg" /><br />
        <br />
        <br />
        
        
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay">
    </div>
</body>
</html>但我现在不知道要怎么处理这个图片的src（或者叫imageurl）？因为有很多图片，不可能一个一个的添加，需要一点就会生成相应的图片。这是我在后台的代码片段，不报错，但是点链接没反应。不知道是哪里有问题。        Response.Write("<div id='modellist'style='margin:0 auto;font-size: 12pt; z-index: 102; left: 20%; width: 810px; color: white;position: absolute; top: 150px; height: 100%; text-align: center'>");
        Response.Write(" <table class='model' border='1' cellspacing=0 cellpadding=0 style='width:810px;'");
        
        for (int i = 0; i < ds.Tables[0].Rows.Count / 6; i++)
        {
            Response.Write(" <tr>");
            for (int j = 0; j < 6; j++)
            {
                string iURL = ds.Tables[0].Rows[jlh]["imagepath"].ToString();
                string model = ds.Tables[0].Rows[jlh]["model"].ToString();
                
                Image2.ImageUrl = iURL;
               
                Response.Write(" <td  style='width:135px'  align='center'> <a href='#' onclick=\"document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'>" + ds.Tables[0].Rows[jlh]["model"].ToString() + " </a> </td>"); 
                jlh++;
            }
            Response.Write(" </tr>");以下代码就先略了。
后台是这样了，前台就我在</form>前把这两个DIV一扔，还请大家看看，我都错在哪里了，要修改什么地方？本人小菜鸟一只，JS不会，硬做这种AJAX的效果，太有困难。  <div id="light" class="white_content" style="text-align: center">
        <asp:Image ID="Image1" runat="server" ImageAlign="Middle" ImageUrl="http://www.iptimetv.com/phonemodel/Phone/NokiaN95.jpg" /><br />
        <br />
        <br />
        
        
        <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a></div>
    <div id="fade" class="black_overlay">
    </div>

解决方案 »

  1.   

    JQuery有很多不错的案例
    参考
      

  2.   

    用AJAX返回图片链接地址，然后在客户端根据图片链接地址显示
      

  3.   

    顺序：
    1、从AJAX取数据
    2、将数据写入到层中
    3、控制显示
      

  4.   

    前台不行， 就想后台， js不熟悉， 就用后台控件。为什么要用<a>? 用linkbutton嘛，div改成用panle控件嘛，这样在后台不是想怎么操作就怎么操作吗？
    panle自动也是生成div啊。具体代码自己写吧
      

  5.   

    不是说了吗,AJAX不会,我开发用的原版的VS2005,还没AJAX呢,后台我什么都没用,都是代码,前台只有一个dropdownlist和一个image控件,别的啥都没有,所以才上来问大家,要是什么都有,就好做了
      

  6.   

    首先，还是尽量用Ajax来做，不是很难，方法也很多，这里就不详述了。至于你说的在后台实现，也是可以的，缺点就是点击以后会有刷新的动作，然后才显示div层。只要把<a>换成<linkbutton>，然后imageUrl在button click事件中赋值就可以了。