简单的js弹出div层

只要能弹出来层就行，因为ie6下用css设置层的z-index不行，所以改用js，就是点击一个按钮，在那个按钮下方能显示，主要是在ie6下能盖住其他元素就行不要任何遮罩效... 只要能弹出来层就行，因为ie6下用css设置层的z-index不行，所以改用js，就是点击一个按钮，在那个按钮下方能显示，主要是在ie6下能盖住其他元素就行
不要任何遮罩效果额~~就能弹出来解决ie6的z-index， display的显示和隐藏我会写额，但是ie6下无法在最顶层的~~其他浏览器都行，展开

 我来答

3个回答

#热议# 不吃早饭真的会得胆结石吗？

菜虫先飞
2010-09-06 · TA获得超过116个赞

知道答主

回答量：124

采纳率：0%

帮助的人：0

我也去答题访问个人页

关注

展开全部

别人的。

<html>
<body>

<p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p>
<input type="button" value="显示" onclick="loadBox.show()"/>
<p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p><p>页面</p>
<p>页面</p>
<p>页面</p>
<p>页面</p>

<p>1</p>
<style type="text/css">
body,p,div,ul,ol{padding:0;margin:0;border:0;}
body{height:100%;font-size:12px;}
.bgLayer{ background:#000; opacity:0.5; filter:alpha(opacity=50);z-index:10001;position:absolute;left:0;top:0;}
.boxLayer{ background:#fff; border:4px solid #ccc; overflow:hidden; zoom:1; z-index:10002; position:absolute;padding:8px;}
.boxLayer p{padding:5px 0;text-align:center;}
.alldenglu{
width:260px;}
.denglu {
font-size: 14px;
margin-bottom:6px;
color: #999999;
}
</style>
<script type="text/javascript">
//<![CDATA[
//弹出层 by ChenLiang v1.0
function LightBox(boxWidth,boxHeight,boxContent)
{
this.boxWidth=boxWidth;
this.boxHeight=boxHeight;
this.boxContent=boxContent;
var bgLayer,boxLayer;
var documentHtml=document.documentElement;
this.createBgLayer=function()
{
bgLayer = document.createElement("div");
with (bgLayer)
{
className="bgLayer";
style.width=documentHtml.scrollWidth+"px";
style.height=documentHtml.scrollHeight+"px";
style.display="none";
}
document.body.insertBefore(bgLayer,document.body.firstChild);
};
this.createBox=function(){
boxLayer = document.createElement("div");
with (boxLayer)
{
className = "boxLayer";
style.width=this.boxWidth + "px";
style.height = this.boxHeight +"px";
style.display="none";
};
document.body.insertBefore(boxLayer,document.body.firstChild);
};
this.init= function()
{
this.createBgLayer();
this.createBox();
}
// if IE 6.0
function hideShowSelect(obj)
{
if (window.navigator.userAgent.indexOf("MSIE 6.0") > 0)
{
var selectDom = document.getElementsByTagName("select");
for (var i = 0; i < selectDom.length ; i++)
{
if (obj)
selectDom[i].style.display="none";
else
selectDom[i].style.display="";
}
}
};
this.show = function()
{
hideShowSelect(true);
boxLayer.innerHTML=this.boxContent;
bgLayer.style.display = "block";
boxLayer.style.display = "block";
boxLayer.style.left = documentHtml.offsetWidth /2 - boxLayer.offsetWidth/2 +"px";
boxLayer.style.top = documentHtml.scrollTop + documentHtml.offsetHeight/2 - this.boxHeight/2 -30 + "px";
}
this.hide = function()
{
hideShowSelect(false);
bgLayer.style.display = "none";
boxLayer.style.display = "none";
}
}
//]]>
</script>
<script type="text/javascript">
//调用方法
var loadBox= new LightBox(260,150);
window.onload=function(){
loadBox.init();
loadBox.boxContent='<div class="alldenglu"><form action="chenggong.htm" method="post" enctype="multipart/form-data" name="indexForm"><div class="wenji">玩游戏前，请先登陆！</div><div align="center" class="denglu">用户名:<input type="text" name="username" value="" size="15"></div><div align="center" class="denglu">密码:<input type="password" name="password" value="" size="15"></div><div align="center" class="denglu"><input type="submit" name="button" id="button" value="提交" onclick="return checkform()" /> <input name="" type="reset" value="重置" /><input type="button" value="不想玩了！" onclick="loadBox.hide()" /></div></form></div>';
}
</script>
</html>

已赞过 已踩过<

评论收起

luhfly
2010-09-06 · TA获得超过341个赞

知道小有建树答主

回答量：695

采纳率：0%

帮助的人：454万

我也去答题访问个人页

关注

展开全部

原先设置div属于最顶端的层，但display=none，看不到它了，
点击事件发生，修改 div.style.display="block" 即可

已赞过 已踩过<

评论收起

匿名用户
2010-09-08

展开全部

这里有一个弹出层效果
你可以参考一下

参考资料： http://www.blueidea.com/common/shoutbox/redir.asp?6=h&id=11421

本回答被提问者采纳

已赞过 已踩过<

评论收起

更多回答（1）

推荐律师服务：若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询

简单的js弹出div层

其他类似问题

为你推荐：