Jquery 遮罩层重叠问题!急急急

Rex619 2012-11-15 08:44:10
页面刚加载的时候进行判断如果 TempStatus = 0 , 那么就弹出

如果 TempStaus = 1 那么需要弹出一个跟这个差不多的遮罩层,但是这时出现了如下问题

代码如下:
Test.aspx

<head runat="server">
<title>遮罩层弹出页</title>
<script src="js/dragDiv.js" type="text/javascript"></script>
<script src="js/myLightBoxFrame.js" type="text/javascript"></script>
</head>
<body>
<form id="form1" runat="server">
<div>
</div>
</form>
</body>

Test.aspx.cs代码如下

public string TempStatus;
protected void Page_Load(object sender, EventArgs e)
{
TempStatus = Request.QueryString["TempStatus"];
if (TempStatus == "0" || TempStatus == null)
{
//用户未登录时弹出温馨提示遮罩框
ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>createFrameOverLayer(600,300,'HouseYouke.aspx','0')</script>");
}
if (TempStatus == "1")
{
//用户已登录时弹出用户登录遮罩框
ClientScript.RegisterStartupScript(ClientScript.GetType(), "myscript", "<script>createFrameOverLayer(400,300,'DialogLogin.aspx','1')</script>");
}
}

myLightBoxFrame.js文件如下

var isIE = (document.all) ? true : false; //document.all 只有ie支持此属性
var ieVersion = 7; //IE版本,默认为7
if (isIE) {
ieVersion = parseFloat(navigator.appVersion.split("MSIE")[1]);
}
var de = getBodyObj();
function getBodyObj() {
return (document.documentElement) ? document.documentElement : document.body;
}
function resetCSS(elem, prop) { for (var i in prop) { elem.style[i] = prop[i]; } }
//滚动条位置
function scrollX() { return self.pageXOffset || de && de.scrollLeft || document.body.scrollLeft; }
function scrollY() { return self.pageYOffset || de && de.scrollTop || document.body.scrollTop; }
//可视尺寸
function windowW() { return self.innerWidth || de && de.clientWidth || document.body.clientWidth; }

function windowH() { return self.innerHeight || de && de.clientHeight || document.body.clientHeight; }
//页面尺寸(最小不小于可视尺寸)
function pageW() { var s = document.body.scrollWidth; var c = windowW(); return s > c ? s : c; }
function pageH() { var s = document.body.scrollHeight; var c = windowH(); return s > c ? s : c; }


function createFrameOverLayer(w, h, href, TempStatus) {
if (TempStatus == "0") {
//温馨提示遮罩层
var tempInnerHtml = "<div id=\"divProcessHead\" style='height:194px;width:100%;margin:0 auto;position:absolute;top:0px;text-align:right;background-color:#fff;border: 10px solid #6CA5DD'>";
tempInnerHtml += "<div style='background-color: #4684C1; height: 42px;'><div style='float: left'><img alt=\"\" src=\"img/AntClassTips.gif\" /></div><div style='float: left; font-family: 宋体; font-size: 18px; font-weight: bolder; font-style: inherit;color: #FFFFFF; line-height: 42px'>温馨提示</div><div style='float: right; background-image: url('img/AntClassBg.gif');'></div><div style='float: right; line-height: 42px; padding-right: 12px; padding-top: 10px;'><img alt=\"\" src=\"img/AntTuanclose.gif\" title=\"关闭按钮\" style='cursor: pointer' onclick=\"closeLightBox()\" /></div></div>"
tempInnerHtml += " <iframe scrolling='no' frameborder='0' src='" + href + "' width='100%' height='75%'></iframe></div>";
//建立lightbox
var over = document.createElement("div");
over.id = "myLightBoxLayer";
var over2 = document.createElement("div");
over2.id = "myProcessLayer";
document.body.appendChild(over);
document.body.appendChild(over2);
//重设lightbox尺寸和位置
function resetOver() {
//设定遮掩层尺寸
resetCSS(over, { position: "absolute", zIndex: "998", top: "0px", left: "0px", backgroundColor: "gray", opacity: "0.5", filter: "alpha(opacity=80)", width: pageW() + "px", height: pageH() + "px" });

//设定弹出层尺寸和位置
var eh = windowH() - h;
var ew = windowW() - w;
eh = eh < 0 ? 0 : eh;
ew = ew < 0 ? 0 : ew;
resetCSS(over2, { position: "absolute", zIndex: "999", width: w + "px", height: h + "px", left: scrollX() + parseInt(ew / 2) + "px", top: scrollY() + parseInt(eh / 2) + "px", overFlow: "hidden" });
// over2.onmousedown = "down(this)";
};
resetOver();
window.onresize = resetOver;
window.onscroll = resetOver;
over2.innerHTML = tempInnerHtml;
}
if (TempStatus == "1") {
//用户登录遮罩层
var tempInnerHtml = "<div id=\"divProcessHead\" style='height:294px;width:100%;margin:0 auto;position:absolute;top:0px;text-align:right;background-color:#fff;border: 10px solid #6CA5DD'>";
tempInnerHtml += "<div style='background-color: #4684C1; height: 42px;'><div style='float: left'><img alt=\"\" src=\"img/AntClassTips.gif\" /></div><div style='float: left; font-family: 宋体; font-size: 18px; font-weight: bolder; font-style: inherit;color: #FFFFFF; line-height: 42px'>用户登录</div><div style='float: right; background-image: url('img/AntClassBg.gif');'></div><div style='float: right; line-height: 42px; padding-right: 12px; padding-top: 10px;'><img alt=\"\" src=\"img/AntTuanclose.gif\" title=\"关闭按钮\" style='cursor: pointer' onclick=\"closeLightBox()\" /></div></div>"
tempInnerHtml += " <iframe scrolling='no' frameborder='0' src='" + href + "' width='100%' height='75%'></iframe></div>";
//建立lightbox
var over = document.createElement("div");
over.id = "myLightBoxLayer";
var over2 = document.createElement("div");
over2.id = "myProcessLayer";
document.body.appendChild(over);
document.body.appendChild(over2);
//重设lightbox尺寸和位置
function resetOver() {
//设定遮掩层尺寸
resetCSS(over, { position: "absolute", zIndex: "998", top: "0px", left: "0px", backgroundColor: "gray", opacity: "0.5", filter: "alpha(opacity=80)", width: pageW() + "px", height: pageH() + "px" });

//设定弹出层尺寸和位置
var eh = windowH() - h;
var ew = windowW() - w;
eh = eh < 0 ? 0 : eh;
ew = ew < 0 ? 0 : ew;
resetCSS(over2, { position: "absolute", zIndex: "999", width: w + "px", height: h + "px", left: scrollX() + parseInt(ew / 2) + "px", top: scrollY() + parseInt(eh / 2) + "px", overFlow: "hidden" });
// over2.onmousedown = "down(this)";
};
resetOver();
window.onresize = resetOver;
window.onscroll = resetOver;
over2.innerHTML = tempInnerHtml;

}


}

//点击关闭lightbox
function closeLightBox() {
var over = document.getElementById("myLightBoxLayer");
var over2 = document.getElementById("myProcessLayer");
document.body.removeChild(over);
document.body.removeChild(over2);
}
...全文
113 点赞 收藏 4
写回复
4 条回复
Rex619 2012年11月15日
我刚才测试了下在点Test弹出的遮罩层里面的登录链接的时候,先调用JS里的closeLightBox()方法,但是获取不到对象
回复 点赞
Rex619 2012年11月15日
我也是刚接触Jquery没多久 , 不怎么会用,请教一下 你说的框架是我JS里写的iframe吗? 不用iframe的话我不知道用什么其他方法了
回复 点赞
scscms太阳光 2012年11月15日
弹层就弹层,为什么还要放一个框架?框架内再弹层当然是这样啦。
回复 点赞
Rex619 2012年11月15日
DialogLogin.aspx代码如下

<head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />
    <title>用户登录</title>
    <link href="css/DialogCss.css" rel="stylesheet" type="text/css" />
    <script src="js/myLightBoxFrame.js" type="text/javascript"></script>
</head>
<body>
    <div class="AntUserLoginInfo">
        <div class="AntClassUserInfo" style="width: 380px;">
            <form action="" id="dialoglogin1" style="margin: 0;">
            <table align="center" border="0" cellpadding="0" cellspacing="0">
                <tr>
                    <td class="F" valign="middle" width="60">
                        用户名:
                    </td>
                    <td width="200">
                        <input class="Input" id="txtusername" name="txtusername" type="text" />
                    </td>
                    <td width="120">
                        <span id="txtusernameTip"></span>
                    </td>
                </tr>
                <tr>
                    <td class="F" valign="middle">
                        密 码:
                    </td>
                    <td width="200">
                        <input class="Input" id="txtuserpwd" name="txtuserpwd" onpaste="return false" type="password" />
                    </td>
                    <td>
                        <span id="txtuserpwdTip"></span>
                    </td>
                </tr>
                <tr>
                    <td>
                         
                    </td>
                    <td class="P" colspan="2">
                        <input name="txtremand" type="checkbox" value="1" />
                        记住密码,下次自动登录 <span>(公共场所慎用)</span>
                    </td>
                </tr>
                <tr>
                    <td>
                         
                    </td>
                    <td class="button" colspan="2">
                        <input id="loginSubmit" name="loginSubmit" type="submit" value="登 陆" />
                        <a href="DialogReg.aspx">注册</a> <a href="http://www.2500sz.co/Account/FindPassword.aspx"
                            target="_blank">找回密码</a>
                    </td>                </tr>
            </table>
            </form>
        </div>
    </div>
</body>
HouseYouke.aspx代码如下:

<head runat="server">
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
    <meta content="IE=EmulateIE7" http-equiv="X-UA-Compatible" />
    <title>游客发布信息</title>
    <link href="css/DialogCss.css" rel="stylesheet" type="text/css" />
    <script src="js/myLightBoxFrame.js" type="text/javascript"></script>
</head>
<body>
    <div class="AntUserLoginInfo Tips"">
        <div class="AntClassTips">
            <div class="L">
                <img alt="" src="img/Popup_06.gif" />
            </div>
            <div class="R">
                <ul>
                    <li class="Tips-1">您现在是未登陆状态! </li>
                    <li class="Tips-2"><a href="">以游客身份发布信息请关闭对话框</a>
                        (发布后若需要修改删除信息联系网站客服) </li>
                    <li class="Tips-2"><span>我要 <a class="Login" href="Test.aspx?TempStatus=1">登陆</a> 或 <a
                        class="Reg" href="#">注册</a></span> 会员再发信息 (可自行修改/删除/推广等操作) </li>
                </ul>
            </div>
        </div>
    </div>
</body>
回复 点赞
发动态
发帖子
JavaScript
创建于2007-09-28

5.1w+

社区成员

22.3w+

社区内容

Web 开发 JavaScript
社区公告
暂无公告