87,986
社区成员
发帖
与我相关
我的任务
分享Jquery 遮罩层重叠问题！急急急
页面刚加载的时候进行判断如果 TempStatus = 0 ， 那么就弹出
如果 TempStaus = 1 那么需要弹出一个跟这个差不多的遮罩层，但是这时出现了如下问题
代码如下：
Test.aspx
Test.aspx.cs代码如下
myLightBoxFrame.js文件如下
如果 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);
}
...全文
请发表友善的回复…
发表回复
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>
<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>
