zoukankan      html  css  js  c++  java

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

    项目中一个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层又回初始位置了。

    现在头疼啊，我都找了一天了，请高手赐教啊！分不是问题，不够我补！
    redria»
    说一个不完美的方法，当然我比较菜，left相对于gridview应该是相对固定的。剩下的就是top的问题，可以根据鼠标来定位，就是出来的div不会很准确的定位。
    chen_lichao»
    点击的时候有
    event.clientX
    event.clientY
    diandian82»
    http://www.cssrain.cn/article.asp?id=62
    lovingkiss»
    还要触发服务器端事件，就只能用Ajax来获取数据，和定位了；
    zhengweitao»
    我比较菜 但我可以帮你顶上去
    Magicwords»
    获取到鼠标的位置就可以了，
    liubin911»
    不知道能不能帮你

    HTML code 
    
<script>
function  show(o,id){
var  m=document.getElementById(id)
m.style.pixelLeft=getL(o)
m.style.pixelTop=getT(o)+o.offsetHeight
m.style.visibility=''
}
function  hide(id){
document.getElementById(id).style.visibility='hidden'
}
function  getL(e){
var  l=e.offsetLeft;
while(e=e.offsetParent){
l+=e.offsetLeft;
}
return  l
}
function  getT(e){
var  t=e.offsetTop;
while(e=e.offsetParent){
t+=e.offsetTop;
}
return  t
}
<!-- 模板列里 -->
<asp:TemplateColumn>
<HeaderTemplate>
图片
</HeaderTemplate>
                                        <ItemTemplate>
<a href='productbianji.aspx?id=<%#DataBinder.Eval(Container.DataItem,"product_id") %>' style="text-decoration: none; border-right: 0px solid; border-top: 0px solid; border-left: 0px solid; border-bottom: 0px solid;">
<img  src='<%#DataBinder. Eval(Container.DataItem,"product_url")%> ' onmouseover='show(this,<%#DataBinder.Eval(Container.DataItem,"product_id") %>)' onmouseout='hide(<%#DataBinder.Eval(Container.DataItem,"product_id") %>)' style="padding-right: 0px; padding-left: 0px; padding-bottom: 0px; padding-top: 0px; margin: 0px;  100px; height: 100px;">
</a>
                                            <div id='<%#DataBinder.Eval(Container.DataItem,"product_id") %>'  style="BORDER-RIGHT:black 1px solid; PADDING-RIGHT:0px; BORDER-TOP:black 1px solid; PADDING-LEFT:0px; VISIBILITY:hidden; PADDING-BOTTOM:0px; BORDER-LEFT:black 1px solid; WIDTH:0px; PADDING-TOP:0px; BORDER-BOTTOM:black 1px solid; left: 0px; top: 0px; position: absolute;" >
<img src='<%#DataBinder. Eval(Container.DataItem,"product_url")%> '  style="300px; height: 300px;">
</div>
                                        </ItemTemplate>
                                    </asp:TemplateColumn>
        </script>
    liubin911»
    复制错了点东西，模板列里不是在 </script>标记里的，放在控件里，我像一般人都能看明白
    spyking945»
    document.all("div").style.top=event.clientY+10;
    document.all("div").style.left=event.clientX+10;
    xiaxiazhu119»
    帮顶一下
    wwd252»
    来了哦
    delphi_new»
    设置这个DIV的z-index 的值最大，
    比如设置为 z-index:10000就在上面了
    haplvs»
    顶，我先收藏了
    typeof»
    up
    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>
    多学学样式表就好了！
    kokyulei»
    现在谢谢各位，我也知道position:absolute; left:0px; top:5px; z-index:99这些。现在我的问题是怎么能根据我点击的按钮的位置弹出div层。简单的说div不能跟随我点击的按钮来显示。只能固定一个位置显示。你们有什么好的办法吗？
    kokyulei»

    这是我在codeproject找到的，但是只有dll，没有说明怎么实现的。我现在做的功能跟他一样，就是我的是datalist，他用的是gridview。请高手们看看div根据点击的行跟随显示这个功能怎么完成，当然还要触发要是在服务器事件。
    takako_mu»
    臺……難了，LX速度解決！
    weinaxxc»
    这个是我以前改的一个DIV的提示框代码，就是在鼠标悬停的地方弹出DIV来描述信息，我觉得你改改应该可以搞的出来的！
    C# code 
    
//这里不用多说了，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函数
    C# code 
    
string title1="姓名"；
string title2="编号";
string title3="密码";
string title4="性别";
tr_link.Attributes.Add("onclick", "overlib('" + title1 + "','" + title2 + "','" + title3 + "','" + title4 + "')");

    neilzaza»
    我写了个例子 时间有限 简单了一点 不过应该对你有点帮助 能实现你的要求
    前台：
    HTML code 
    
<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>


    后台：
    C# code 
    
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");
}
}
}
  • 相关阅读:
    Scanner和BufferedReader
    java annotation
    java获取短uuid
    定时任务线程
    sql 查询最近30分钟或者自定义时间数据
    查看base64编码图片
    oracle 的PACKAGE恢复过程
    Oracle BFILE备忘
    读取Spring的配置文件applicationContext.xml的5种方法
    解决eclipse ctrl+鼠标左键不能用
  • 原文地址：https://www.cnblogs.com/liufei88866/p/1320325.html
Copyright © 2011-2022 走看看