如何使用showModalDialog打开页面，主页面变为黑色。 - 编程论坛

#2

ysf01812010-10-16 19:52

没有人会吗？

#3

lele20072010-10-17 01:14

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.">
<html xmlns="http://www.">
<head>
<style 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";
        height = String(Math.max(document.documentElement.clientHeight,document.documentElement.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;
    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<30;i++){document.getElementById("lele").innerHTML += html;}
}
</script>
</head>

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

</body>
</html>

背景变半透明。。试一下这个效果。

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

#4

yms1232010-10-17 13:27

那个不是使用showmodalDialog实现的百度搜索lightbox就是这种效果，网上有不少教程

#5

ysf01812010-10-17 18:15

谢谢。。。。。。。。。。。。。。。。。。。。没有实例吗。

[ 本帖最后由 ysf0181 于 2010-10-17 20:40 编辑 ]

#6

ysf01812010-10-17 20:52

程序代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.">
<html xmlns="http://www.">
<head>
<style 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 newsearch(murl,width,height)
{

murl = encodeURI(murl);

var obj = window.showModalDialog(murl,window,"dialogWidth="+width+"px;dialogHeight="+height+"px;status=no;help=no;");
  if(obj == 1)//判断是否刷新

{
  //alert('刷新');
  window.location.reload();

}

else if(obj == 2)//判断是否刷新

{
  //alert('刷新');
  window.location='test.asp';
  window.close();

}

else{

window.location.reload();

}
  //window.location.href =window.location.href; //刷新父窗口

// window.returnValue==1

//window.location.reload(); //刷新父窗口

//dialogArguments.close();

   //alert(str);

}
//window.showModalDialog 的调用结束

//创建一个遮罩层
function Layer(htmlContent)
{
    //创建一个遮罩层，半透明
    //------------------我是谁？我是割线!-----------------//
    var lay = document.createElement("div");
    lay.id = "frame"
    with(lay.style)
    {
        width = "100%";
        height = document.documentElement.scrollHeight + "px";
        height = String(Math.max(document.documentElement.clientHeight,document.documentElement.scrollHeight))+"px";
        background = "#000000";
        position = "absolute";
        left = "0";
        top = "0";
        filter = 'Alpha(opacity=50)';
        opacity = '0.5';
    }
    document.body.appendChild(lay);

   // newsearch('123.html?Rnd='+ Math.random(),450,350);


    //创建显示内容
    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<30;i++){document.getElementById("lele").innerHTML += html;}
}
</script>
</head>

<body>
<div align="center"><br>
<input type="button" value="通过调用覆盖层，再次调用 window.showModalDialog" onclick="Layer(' ');newsearch('123.html?Rnd='+ Math.random(),450,350);
" />
</div>
<div id="lele"></div>

</body>
</html>

[ 本帖最后由 ysf0181 于 2010-10-17 21:26 编辑 ]