注册 登录
编程论坛 → JavaScript论坛

js弹层定位问题

lele2007 发布于 2010-10-10 12:37， 1165 次点击
程序代码：
//创建一个遮罩层
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内容不固定的，宽高度不相同。

7 回复
#2
pigzee2010-10-10 17:10
不会，关注，呵呵。共同学习！
在不确定宽度与高度的情况下设置。
应该可以弄多层，但是没弄出来。呵呵
thickbox应该有呵呵

[ 本帖最后由 pigzee 于 2010-10-10 17:12 编辑 ]
#3
lele20072010-10-11 12:42
程序代码：
//创建一个遮罩层
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";
}
可以了。
#4
pigzee2010-10-11 13:46
我怎么不可以呢。
#5
lele20072010-10-11 16:26
以下是引用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 编辑 ]
#6
lele20072010-10-11 16:33
你试一下例子。。

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

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

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


[ 本帖最后由 lele2007 于 2010-10-11 18:45 编辑 ]
#7
pigzee2010-10-11 17:36
恩，下班了。晚上细看下，呵呵，谢谢！！！！
#8
pigzee2010-10-12 14:11
可以可以的。呵呵。谢谢共享！
marginLeft marginTop，呵呵挺好！

[ 本帖最后由 pigzee 于 2010-10-12 14:12 编辑 ]
1
©2025, BC-CN.NET
电脑版