1

多くのコンテンツを含む古典的なページと、ポップアップを開くボタンがあります。このポップの高さはウィンドウよりも大きくなる可能性があるため、ポップアップ内をスクロールする必要があります。トリガーを非表示にすると、このポップアップを表示する前とまったく同じスクロール位置になりたいです。私は多くの解決策を試しましたが...それは正確ではありません:) JSfiddleの例を見ることができます: http://jsfiddle.net/S6EFW/

そして、USA TODAY のサイトで私が何をしようとしているのかを見ることができます : http://www.usatoday.com/

少しスクロールして主要な記事の 1 つをクリックすると、ポップアップが表示されます。このポップアップでスクロールできます。ポップアップを閉じると、ポップアップを開く前とまったく同じページの場所にいます。

私のコード:

  $( "#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 に答える