| 网站首页 | 业界新闻 | 小组 | 威客 | 人才 | 下载频道 | 博客 | 代码贴 | 在线编程 | 编程论坛
欢迎加入我们,一同切磋技术
用户名:   
 
密 码:  
共有 1165 人关注过本帖
标题:js弹层定位问题
只看楼主 加入收藏
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
结帖率:100%
收藏
已结贴  问题点数:20 回复次数:7 
js弹层定位问题
程序代码:
//创建一个遮罩层
function Layer(w,htmlContent)
{
    //创建一个遮罩层,半透明
    //------------------我是谁?我是割线!-----------------//
    var lay = document.createElement("div");
    lay.id = "frame"
    with(lay.style)
    {
        width = "100%";
        height = document.body.scrollHeight + 100 + "px";
        background = "#000000";
        position = "absolute";
        left = "0";
        top = "0";
        filter = 'Alpha(opacity=50)';
        opacity = '0.5';
    }
    document.body.appendChild(lay);
   

    //创建显示内容
    var info = document.createElement("div");
    info.id = "msg";
    info.innerHTML = htmlContent;
    with(info.style)
    {
        position = "absolute";
        left = (document.body.offsetWidth - w) / 2 + "px";
        top = document.documentElement.scrollTop + window.screen.height / 6 + "px";
    }
    document.body.appendChild(info);
    hiddenSelect("hidden"); //隐藏下拉菜单
}
js的弹层,层里的内容如何定位在屏幕的正中央啊。
left = (document.body.offsetWidth - w) / 2 + "px";
top = document.documentElement.scrollTop + window.screen.height / 6 + "px";

左,上

这两个根据传入的htmlContent内容不固定的,宽高度不相同。

搜索更多相关主题的帖子: 定位 frame 
2010-10-10 12:37
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
收藏
得分:14 
不会,关注,呵呵。共同学习!
在不确定宽度与高度的情况下设置。
应该可以弄多层,但是没弄出来。呵呵
thickbox应该有呵呵

[ 本帖最后由 pigzee 于 2010-10-10 17:12 编辑 ]
2010-10-10 17:10
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
程序代码:
//创建一个遮罩层
function Layer(htmlContent)
{
    //创建一个遮罩层,半透明
    //------------------我是谁?我是割线!-----------------//
    var lay = document.createElement("div");
    lay.id = "frame"
    with(lay.style)
    {
        width = "100%";
        height = document.body.scrollHeight + "px";
        background = "#000000";
        position = "absolute";
        left = "0";
        top = "0";
        filter = 'Alpha(opacity=50)';
        opacity = '0.5';
    }
    document.body.appendChild(lay);
   

    //创建显示内容
    var info = document.createElement("div");
    info.id = "msg";
    info.innerHTML = htmlContent;
    with(info.style)
    {
        position = "absolute";
        left = "0px";
        top = document.documentElement.scrollTop + "px";       

    }
    document.body.appendChild(info);
    info.style.marginLeft = (document.documentElement.clientWidth - info.clientWidth)/2 + "px";
    info.style.marginTop = (document.documentElement.clientHeight - info.clientHeight)/2 + "px";
}
可以了。

学习编程www.
2010-10-11 12:42
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
收藏
得分:0 
我怎么不可以呢。
2010-10-11 13:46
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
以下是引用pigzee在2010-10-11 13:46:26的发言:

我怎么不可以呢。
程序代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www. xmlns="http://www. type="text/css">
body{
    margin:0;
    padding:0;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>乐乐</title>
<script language="javascript">
//创建一个遮罩层
function Layer(htmlContent)
{
    //创建一个遮罩层,半透明
    //------------------我是谁?我是割线!-----------------//
    var lay = document.createElement("div");
    lay.id = "frame"
    with(lay.style)
    {
        width = "100%";
        height = document.documentElement.scrollHeight + "px";
                if(document.documentElement.clientHeight>document.documentElement.scrollHeight){height = document.documentElement.clientHeight + "px";}
        background = "#000000";
        position = "absolute";
        left = "0";
        top = "0";
        filter = 'Alpha(opacity=50)';
        opacity = '0.5';
    }
    document.body.appendChild(lay);
  

    //创建显示内容
    var info = document.createElement("div");
    info.id = "msg";
    info.innerHTML = htmlContent;
    document.getElementById("frame").appendChild(info);
    with(info.style)
    {
        position = "absolute";
        left = "0px";
        top = document.documentElement.scrollTop + "px";
        marginLeft = (document.documentElement.clientWidth - info.clientWidth)/2 + "px";
        marginTop = (document.documentElement.clientHeight - info.clientHeight)/2 + "px";
    }
    document.body.appendChild(info);
}

//关闭遮罩层
function hiddenDiv()
{
    document.body.removeChild(document.getElementById("frame"));
    document.body.removeChild(document.getElementById("msg"));
}
window.onload = function()
{
  var html = '<input type="button" value="弹层" onclick="Layer(\'<img src=http://pass.bccn.net/data/avatar/000/19/06/20_avatar_middle.jpg onclick=hiddenDiv()>\')" /><input type="button" value="弹层2" onclick="Layer(\'<img src=http://bbs.bccn.net/images/default/logo.gif onclick=hiddenDiv()>\')" /><br>内容';
  for(i=1;i<100;i++){document.getElementById("lele").innerHTML += html;}
}
</script>
</head>

<body>
<div id="lele"></div>

</body>
</html>



[ 本帖最后由 lele2007 于 2010-10-11 17:49 编辑 ]

学习编程www.
2010-10-11 16:26
lele2007
Rank: 5Rank: 5
来 自:广东省深圳
等 级:职业侠客
威 望:6
帖 子:1028
专家分:305
注 册:2007-9-4
收藏
得分:0 
你试一下例子。。

height = document.documentElement.scrollHeight + "px";

这个页面内容少时,要再写另一个。。

height = String(Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))+"px";


[ 本帖最后由 lele2007 于 2010-10-11 18:45 编辑 ]

学习编程www.
2010-10-11 16:33
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
收藏
得分:0 
恩,下班了。晚上细看下,呵呵,谢谢!!!!
2010-10-11 17:36
pigzee
Rank: 2
等 级:论坛游民
帖 子:20
专家分:69
注 册:2010-3-30
收藏
得分:0 
可以可以的。呵呵。谢谢共享!
marginLeft marginTop,呵呵挺好!

[ 本帖最后由 pigzee 于 2010-10-12 14:12 编辑 ]
2010-10-12 14:11
快速回复:js弹层定位问题
数据加载中...
 
   



关于我们 | 广告合作 | 编程中国 | 清除Cookies | TOP | 手机版

编程中国 版权所有,并保留所有权利。
Powered by Discuz, Processed in 0.017804 second(s), 7 queries.
Copyright©2004-2024, BCCN.NET, All Rights Reserved