div弹出框定位问题，超级难！

[kokyulei]

项目中一个gridview，点击一行弹出一个div层，把该条的信息都显示在层中，然后点击保存，更新gridview。
现在我遇到了一个问题，就是点击一行时，div层就在该层下显示。问题就出来了，我根本不能定位到这个div的top和left。因为我没有办法取得我点击行的top和left值。在winform里面好做，可是asp.net就不知道了。
1
虽然也可以用这个 this.popUp.Style["top"]设置，但是取不到点击行的Style["top"]，没有设置的情况下为null。
2
我找到了onfocus="popShow(this);"这个客户端事件。
document.getElementById('popUp').style.top =e.getBoundingClientRect().top + 20 + document.body.scrollTop;//ttop + h;
document.getElementById('popUp').style.left=e.getBoundingClientRect().left + 20 + document.body.scrollLeft;//tleft + w - moneyMsg.clientWidth;
这个可以取道top和left。但是我还要触发服务器端事件，把数据绑定到div层中显示信息，这样一来div层又回初始位置了。

现在头疼啊，我都找了一天了，请高手赐教啊！分不是问题，不够我补！

[kokyulei]

希望大家把我说的看清楚在说。

[weinaxxc]

我提个建议，做增删改操作的时候，如果一定要做成LZ这样，最好先做一个z-index=99的div来屏蔽当前窗口，然后在这个DIV上摆一个居中的DIV来显示当前操作的数据，再提交！

[yytt123622]

层的定位是靠position属性的！先把弹出层的position属性定义为“绝对定位”，然后在包含这个层的标签的position属性定位为“相对定位”，这样就可以控制住这个层在GridView的上面，然后通过定义弹出层的left和top等属性等位好，此时left代表你层的左边框距离包含这个层的标签的距离，top等属性也是如此
比如：
<table>
<tr>
<td style="height:20px; widht:100px; position:relative">
<div style="position:absolute; left:0px; top:5px; z-index:99;">这个就是能覆盖在你GridView上面的层，而且这个层不会因为你页面的伸缩而位置乱跑</div>
</td>
</tr>
</table>
多学学样式表就好了！

[takako_mu]

臺……難了，LX速度解決！

[weinaxxc]

这个是我以前改的一个DIV的提示框代码，就是在鼠标悬停的地方弹出DIV来描述信息，我觉得你改改应该可以搞的出来的！

//这里不用多说了，JS代码
<script language="JavaScript">
//----------------------写HTML代码----------------------
var changdi="<table style='margin:0 0 0 0;border:solid 1px #009933;background:#ffffff''><tr><td align='center' vlign='middle'><img src='../website/image/tips.jpg' width=50 height=50></td><td align='center' vlign='middle'><font color='green' size='6'>这里写你需要显示的东西，也重新写这个变量里面所有的HTML</font></td></tr></table>"; 
//------------------------------------------------------
var isIE  =  document.all?true:false; 
function overlib(tipcontent)
{
   customdiv = document.getElementById("overDiv");
   customdiv2 = document.getElementById("overDiv2");
  
 
    customdiv.innerHTML = tipcontent;
    var tleft=document.body.scrollLeft+window.event.clientX;
    var ttop=document.body.scrollTop+window.event.clientY;
    if(document.body.clientWidth < 300)
   {
        customdiv.style.left = 2;
        customdiv2.style.left = 2;
       
    }
    else if (tleft > document.body.clientWidth-200)
   {
        customdiv.style.left = tleft-175;
         customdiv2.style.left = tleft-175;
       
    }
    else
   {
        customdiv.style.left = tleft + 10;
         customdiv2.style.left = tleft + 10;
        
    }
    if(document.body.clientHeight < 100)
    {
        customdiv.style.top = 25;
          customdiv2.style.top = 25;
       
    }
    else if(ttop > document.body.clientHeight -55)
  {
        customdiv.style.top = ttop - 55;
         customdiv2.style.top = ttop - 55;
       
    }
    else
    {
        customdiv.style.top = ttop + 10;
        customdiv2.style.top = ttop + 10;
    }
      customdiv2.style.width=customdiv.clientWidth;
      customdiv2.style.height=customdiv.clientHeight;
      
      customdiv.style.visibility = 'visible';
      customdiv2.style.visibility = 'visible';
    
    
}
function nd()
{
    customdiv = document.getElementById("overDiv");
    customdiv2 = document.getElementById("overDiv2");
    customdiv.style.width=0;
    customdiv.style.height=0;
    customdiv.style.visibility    = 'hidden';
    customdiv2.style.visibility    = 'hidden';
}
function b(v)
{
window.status=v
};

</script>


//这里可以放在网页的任何地方，一个IFRAME，一个DIV，组合起来可以遮挡SELECT
<div id="overDiv" style="position:absolute; visibility:hidden;z-index:100;padding:0 0 0 0;background:#FDFEF9;text-align:left;font-size:12px;">
       </div>
       <iframe id="overDiv2" src="" scrolling="no" frameborder="no"style="position:absolute; visibility:hidden;z-index:99;filter: Alpha(style=0,opacity=0) "> </iframe>

//鼠标悬停调用
 onMouseOver="return overlib(changdi)" onMouseOut="return nd();"

[kokyulei]

谢谢楼上的兄弟，在js中我知道该怎么做?可是我现在要先点击一行弹出div。这是本来就是调用了客户端事件，然后在调用服务器端时间的。现在我还要加载数据，这些事情都是在服务器端完成的。所以不好搞啊。我还没有想到好的方法。有兴趣研究的，请看看http://www.codeproject.com/KB/custom-controls/SDXGrid.aspx

[cteddy]

你给RMB我给你一个一模一样的
GRIDVIEW
源代码 也可以给你
就是国外的一个重写了的GRIDVIEW组件而已
因为这个组件是收费的

[shawn_yang]

mark

[weinaxxc]

你是说加载数据不好搞吗？

用AJAX异步加载
或者在GRID进行BOUND的时候直接传参到JS函数

string title1="姓名"；
string title2="编号";
string title3="密码";
string title4="性别";
tr_link.Attributes.Add("onclick", "overlib('" + title1 + "','" + title2 + "','" + title3 + "','" + title4 + "')");

[neilzaza]

我写了个例子 时间有限 简单了一点 不过应该对你有点帮助 能实现你的要求
前台：

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>无标题页</title>
    <script type="text/javascript" src="../jquery/jquery.js"></script>
    <script type="text/javascript">
    $(function(){
        $("#GridView1").find("tr").click(function(){
            $("#div1").show();
            $("#div1").css({ position: "absolute", background: "blue" }); 
            $("#div1").css("left",$("#content").offset().left+$("#GridView1").width()/2-$("#div1").width()/2);//这里的弹出框我用的是GridView1正中
            $("#div1").css("top",$("#content").offset().top+$("#GridView1").height()/2-$("#div1").height()/2);
            $(this).find("td").each(function(i){
                switch(i)
                {
                    case 1:$("#table1").find("#tbName").val($(this).text());break;
                    case 2:$("#table1").find("#tbImg").val($(this).text());break;
                    case 3:$("#table1").find("#tbTime").val($(this).text());break;
                }
            });//遍历选中行cell中的text
        });
        
    })
    </script>
</head>
<body>
    <form id="form1" runat="server">
    <div id="content">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="id" DataSourceID="SqlDataSource1" OnRowDataBound="GridView1_RowDataBound">
            <Columns>
                <asp:BoundField DataField="id" HeaderText="id" InsertVisible="False" ReadOnly="True"
                    SortExpression="id" />
                <asp:BoundField DataField="name" HeaderText="name" SortExpression="name" />
                <asp:BoundField DataField="mapImage" HeaderText="mapImage" SortExpression="mapImage" />
                <asp:BoundField DataField="createtime" HeaderText="createtime" SortExpression="createtime" />
            </Columns>
        </asp:GridView>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="Data Source=.;Initial Catalog=xxx;Integrated Security=True"
            ProviderName="System.Data.SqlClient" SelectCommand="SELECT [id], [name], [mapImage], [createtime] FROM [panoImg]">
        </asp:SqlDataSource>
        
        <div id="div1" style="display:none">
            <table id="table1">
            <tr><td>XXX:<asp:TextBox ID="tbName" runat="server"></asp:TextBox></td></tr>
            <tr><td>XXX:<asp:TextBox ID="tbImg" runat="server"></asp:TextBox></td></tr>
            <tr><td>XXX:<asp:TextBox ID="tbTime" runat="server"></asp:TextBox></td></tr>
        </table></div>
      </div>
    </form>
    
</body>
</html>

后台：

protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e)
    {
        for (int i = -1; i < GridView1.Rows.Count; i++)
        {
            //首先判断是否是数据行
            if (e.Row.RowType == DataControlRowType.DataRow)
            {
                //当鼠标停留时更改背景色
                e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");
                //当鼠标移开时还原背景色
                e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
            }
        }
    }

[zonghengchb]

event.clientY
event.clientX
你不是要点一下才出现哪个div么？
点的时候保存下你的鼠标位置不就可以实现么？
虽然没有人家的正规，但应该可以出来效果的
这个效果不错我也做下，做完咱俩交流下啊
qq：328200211
整天没有事干的小菜鸟

[zero8500]

有难度

关注

[zonghengchb]

小弟写的是那个效果你看看，但是为了抢分，没来得及写注释
ps：提示框里面的内容我没有做后台，那里用那个ajax很简单的
我只做出来前台的效果
前台代码：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AboutTheDiv.aspx.cs" Inherits="pwdPackage_AboutTheDiv" %>

<!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 runat="server">
<style>
*{ margin-left:0px; margin-top:0px;}
</style>
<title>无标题页</title>
<script>
function openTheDiv(){
var rowNum = event.srcElement.parentElement.rowIndex+1;
var rowHight = 25;
hiddenDiv.style.display = "block";
hiddenDiv.style.left = "100px";
hiddenDiv.style.top = outDiv.style.top.split("px","")*1 +rowNum * rowHight*1+1*rowNum+"px";
//alert(event.srcElement.parentNode.clientY);
//alert(outDiv.style.top);
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div id="outDiv" style="top:0px;">
<asp:GridView ID="GridViewA" runat="server" BackColor="White"
BorderColor="#999999" BorderStyle="None" BorderWidth="1px" CellPadding="3"
AutoGenerateColumns="False" OnRowDataBound = "changBind" >
<FooterStyle BackColor="#CCCCCC" ForeColor="Black"/>
<RowStyle BackColor="#EEEEEE" ForeColor="Black"/>
<PagerStyle BackColor="#999999" ForeColor="Black" HorizontalAlign="Center" />
<SelectedRowStyle BackColor="#008A8C" Font-Bold="True" ForeColor="White" />
<HeaderStyle BackColor="#000084" Font-Bold="True" ForeColor="White" />
<AlternatingRowStyle BackColor="#DCDCDC" />
<Columns>
<asp:BoundField DataField="shopName" HeaderText="商店名称" />
<asp:BoundField DataField="shopAddress" HeaderText="商店位置" />
<asp:BoundField DataField="addTime" HeaderText="加盟时间" />
</Columns>
</asp:GridView>
</div>
<div id="hiddenDiv" style="top:30px; display:none; background-color:Silver; position:absolute;">
<table id="tabOne">
<tr><td>XXX:<asp:TextBox ID="tbName" runat="server"></asp:TextBox></td></tr>
<tr><td>XXX:<asp:TextBox ID="tbImg" runat="server" Height="22px"></asp:TextBox></td></tr>
<tr><td>XXX:<asp:TextBox ID="tbTime" runat="server"></asp:TextBox></td></tr>
</table>
</div>
</form>
</body>
</html>

后台代码：
using System;
using System.Collections;
using System.Configuration;
using System.Data;
using System.Linq;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Xml.Linq;
using COM.LXJ.Database;
public partial class pwdPackage_AboutTheDiv : System.Web.UI.Page
{
ConnDbForAcccess cdfa = new ConnDbForAcccess();
protected void Page_Load(object sender, EventArgs e)
{
doBind();
}
public void doBind()
{
string strSQL = "select * from shopInfo";
DataSet myds = cdfa.ReturnDataSet(strSQL);
GridViewA.DataSource = myds.Tables[0].DefaultView;
GridViewA.DataBind();
}
protected void changBind(object sender, GridViewRowEventArgs e)
{
for (int i = -1; i < GridViewA.Rows.Count; i++)
{
//首先判断是否是数据行
if (e.Row.RowType == DataControlRowType.DataRow)
{
//当鼠标停留时更改背景色
e.Row.Attributes.Add("onmouseover", "c=this.style.backgroundColor;this.style.backgroundColor='#00A9FF'");
//当鼠标移开时还原背景色
e.Row.Attributes.Add("onmouseout", "this.style.backgroundColor=c");
//点击时候的问题
e.Row.Attributes.Add("onclick","openTheDiv()");
}
}
}
}

[kokyulei]

现在谢谢各位，我也知道position:absolute; left:0px; top:5px; z-index:99这些。现在我的问题是怎么能根据我点击的按钮的位置弹出div层。简单的说div不能跟随我点击的按钮来显示。只能固定一个位置显示。你们有什么好的办法吗？

[kokyulei]

这是我在codeproject找到的，但是只有dll，没有说明怎么实现的。我现在做的功能跟他一样，就是我的是datalist，他用的是gridview。请高手们看看div根据点击的行跟随显示这个功能怎么完成，当然还要触发要是在服务器事件。

[kokyulei]

问题解决了。我用onfocus客户端事件先定位，把点击的位置记录在两个hidden里面，然后执行客户端的事件，因为用到了ajax执行完后在用ScriptManager.RegisterStartupScript执行客户端事件，重新定位，虽然有点麻烦。不过功能是可以完成了。谢谢大家了，谢谢小米

[wuyongbiao]

学习看看

[yuji821]

你详细的说说你是怎么解决的，我也需要呢

[sxiaohui8709253]

弹出用JS来定位，数据用AJAX读 编辑完的数据 可以放在hidden里存储

[ltone]

详细说下解决办法!!