1

我有一个包含很多内容的经典页面，以及一个打开弹出窗口的按钮。这个弹出窗口的高度可能比我的窗口大，所以我需要在弹出窗口中滚动。当我隐藏触发器时，我希望滚动位置与显示此弹出窗口之前完全相同。我已经尝试了很多解决方案，而且......它不完全是:) 你可以在 JSfiddle 上看到一个例子：http: //jsfiddle.net/S6EFW/

您可以在《今日美国》网站上看到我正在尝试做的事情：http ://www.usatoday.com/

如果您滚动一下，然后单击其中一篇主要文章，则会显示一个弹出窗口。您可以在此弹出窗口中滚动。当您关闭弹出窗口时，您与打开弹出窗口之前处于完全相同的页面位置。

我的代码：

  $( "#launch" ).click(function() {
  $( "#popup" ).fadeToggle( "slow", function() {

  });
    $( "#content" ).toggleClass( "whenloaded" );

  });

当您显示弹出窗口时，在内容上添加了一个类：

 .whenloaded {
  position : fixed;
 }

如果您对实现该目标的方法有想法！非常感谢社区:)

4

2 回答 2

1

如果我是对的，这将接近你所追求的

编辑：更新的小提琴

相关的CSS：

html,body{ 
   margin:0; padding:0; height:100%; width:100%; position:absolute; top:0; left:0; overflow:hidden; 
}
#content{
    overflow-y:scroll;
    height:100%;
    width:100%;
    position:absolute;
    top:0;
    left:0;
}
#launch{
    position:absolute;
    top:0;
    left:0;
    z-index:999;
    background:white;
    padding:4px;
    border:1px solid grey;
}
#overlay{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    display:none;
    z-index:99;
    text-align:center;
}
#mask{
    width:100%;
    height:100%;
    position:absolute;
    top:0;
    left:0;
    background:blue;
    opacity:0.5;
}
#popup{
    z-index:100;
    position:relative;
    width:60%;
    top:20%;
    margin:auto;
    max-height:100px; 
    background:white;
    overflow-y:scroll;
}
于 2013-11-14T12:26:02.257 回答
0

我已经明白你的意思了。如果你想要一个静态页面（没有输入和东西），一个更简单的方法是使用纯 javascript。使用 innerHtml 和 css，您可以将所有内容放在一个 div 中，并根据弹出窗口是否打开给它 2 个不同的 ID，并且 1 个 id 让 css 什么也不显示。对于弹出窗口打开的状态，使用 z-index 和 y-overflow。

如果有机会，我将稍后编辑并发布示例。

于 2013-11-14T12:22:16.550 回答