像豆瓣fm，猫扑那样的弹出双页面该怎么做呢

<!DOCTYPE html>
<html>
<head>
<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js'></script>
<style type='text/css'>
#bar { position:fixed; left:0; top:0; width:10px; background:red; height:500px; line-height:500px; text-align:right; }
#bar.current { width:50px; }</style>
<script type='text/javascript'>
function showBar() {
var dis = document.getElementById('bar');
dis.style.width='10px';
dis.onclick = function() {
if(this.style.width!=='10px') {
this.style.width='10px';
this.innerHTML='<';
}
else {
this.style.width='50px';
this.innerHTML='>';
}
};
}
$(function() {
showBar();
});
</script>
</head><body>
<div id='bar'><</div>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>

解决方案 »

  1.   

    登录框弹出思路：我觉得和一般弹出层原理相同，登录框可以用iframe也可以硬编码。页码初始时 隐藏DIV，当用户点击一个绑定事件的对象时。改变弹出层的样式 主要是显示位置。像豆瓣FM 就是定位弹出层 
    position: absolute;
    top: 0;
    left: 0; 
    高度宽度 都可以在这个时候自定义改变。
    因为要显示一个DIV模拟的滚动条，所以要改变原网页的滚动条，就是改变overflow-y:hidden。就可以了。
    然后关闭显示,就还原刚刚的变动就可以了，也可以设置动画效果。