js怎么实现点一个按钮弹出一个层？
像qq牧场一样点包裹按钮，弹出包裹里所有的导航栏，整个土地那一层依然可移动？求高手解答，这个已经困扰我很多天了！！！急急急。。。。。。。...
像qq牧场一样
点包裹按钮，弹出包裹里所有的导航栏，整个土地那一层依然可移动？求高手解答，这个已经困扰我很多天了！！！急急急。。。。。。。 展开
点包裹按钮，弹出包裹里所有的导航栏，整个土地那一层依然可移动？求高手解答，这个已经困扰我很多天了！！！急急急。。。。。。。 展开
展开全部
序说明：
要实现一个简单的LightBox效果，主要有两个部分：覆盖层和高亮层。
【跨浏览器的固定定位】
首先要先说说这个东西position:fixed，它的作用是跨浏览器的固定定位。
摘自详解定位与定位应用：
“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。”
程序中很多地方利用了这个css，ie7、ff都支持这个css，但ie6不支持，程序中只能是在ie6模拟这个效果。
【覆盖层】
覆盖层的作用是把焦点限制在高亮层上，原理是通过一个绝对定位的层（通常使用div），设置它的宽度和高度以致能覆盖整个屏幕（包括缩放和滚动浏览器的情况下），再给它设置一个比较高的zIndex来层叠在原有内容之上（但要比高亮层小），这样用户就只能点到这个层之上的内容了。
要实现一个简单的LightBox效果，主要有两个部分：覆盖层和高亮层。
【跨浏览器的固定定位】
首先要先说说这个东西position:fixed，它的作用是跨浏览器的固定定位。
摘自详解定位与定位应用：
“如让一个元素可能随着网页的滚动而不断改变自己在浏览器的位置。而现在我可以通过CSS中的一个定位属性来实现这样的一个效果，这个元素属性就是曾经不被支持的position:fixed; 他的含义就是：固定定位。这个固定与绝对定位很像，唯一不同的是绝对定位是被固定在网页中的某一个位置，而固定定位则是固定在浏览器的视框位置。”
程序中很多地方利用了这个css，ie7、ff都支持这个css，但ie6不支持，程序中只能是在ie6模拟这个效果。
【覆盖层】
覆盖层的作用是把焦点限制在高亮层上，原理是通过一个绝对定位的层（通常使用div），设置它的宽度和高度以致能覆盖整个屏幕（包括缩放和滚动浏览器的情况下），再给它设置一个比较高的zIndex来层叠在原有内容之上（但要比高亮层小），这样用户就只能点到这个层之上的内容了。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
给按钮添加一个点击事件，填出一个层，宽高都为100%；
<body>
<input type="button" value="xxx" id="btn" />
<div id="div1" style="display:none;"></div>
</body>
<script>
var oBtn = document.getElementById('btn');
var oDiv = document.getElementById('div1');
oBtn.onclick=function(){
oDiv.style.cssText = 'position:absolute; top:0px; left:0px; width:100%; height:100%; z-index:10; background:#ccc; display:block;';
};
</script>
这样就实现了，点击按钮弹出一个层。
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
你就在Body上多写一个div就行了
该div的position为绝对或者继承，先隐藏，z-index堆叠设置最高。
之后你设置个按钮什么的，点击之后利用JS将那div显示即可
该div的position为绝对或者继承，先隐藏，z-index堆叠设置最高。
之后你设置个按钮什么的，点击之后利用JS将那div显示即可
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
这个弹出层是一个div z-index要比土地那层的z-index大才能实现弹出 只要弹出层的大小不会覆盖住土地层 那么你就依然可以操作土地层
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
css定位、jquery
点击包裹加js事件，onclick，让需要弹出的层show()
点击包裹加js事件，onclick，让需要弹出的层show()
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
更多回答（4）
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
