3

RevealというjQueryプラグインを使用しています。特定のクラスのリンクをクリックすると、ポップアップのようなdivが表示されます。

私のウェブサイトでは、コメントを表示するためにこれを使用しています。問題は、divのコンテンツが多い場合、開いたdivがページの下部をプッシュすることです。

ここに画像の説明を入力してください

コメントdivが閉じられた後に不要なスペースをなくすjQueryまたはCssの方法はありますか？

編集1：これは終了アニメーションコードです：

modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                        modal.animate({
                            "top":  $(document).scrollTop()-topOffset + 'px',
                            "opacity" : 0
                        }, options.animationspeed/2, function() {
                            modal.css({'top':topMeasure, 'opacity' : 1, 'visibility' : 'hidden'});
                            unlockModal();
                        });

編集2：スクロールを使用すると、次のようになります。

通常： http： //jsfiddle.net/K4E3g/1/

スクロール： http： //jsfiddle.net/K4E3g/2/

4

3 に答える 3

3

編集済み

プラグインはvisibility: hidden / visible、コード全体でモーダルを広範囲に表示および非表示にするために使用します。これは、閉じた状態のモーダルがに設定されていることを意味します。これvisibility: hiddenは、モーダルがページよりも大きい場合、要素がvisibility: hiddenページ上のスペースを占有するため、ページが本来より長くなるという効果があります。

プラグイン自体ですべてのvisiblity: hiddentodisplay: noneとvisibility: visibletoを変更してみdisplay: blockて、目的の結果が得られるかどうかを確認できますが、これはテストしておらず、望ましくない副作用が発生する可能性があります。

または、EricMartinの優れたSimpleModalプラグインなどの別のモーダルプラグインを検討することをお勧めします。

これがお役に立てば幸いです。

于 2012-05-31T20:09:46.677 に答える
1

作成したモーダル div を CSS でターゲットにし、max-height 値と max-width 値、およびoverflow:scroll を指定する必要があります。

このようなものが動作するはずです:

div.comments-modal {
  max-width:60%;
  max-height:80%;
  overflow:auto;
}

注: px 値の代わりに % 値を使用すると、モーダルのサイズをユーザーのブラウザ/画面サイズに合わせて調整できます。それを防ぎたい場合は、代わりに px で定義された値を使用してください。

于 2012-05-31T20:13:23.203 に答える
0

設定max-heightしてみてくださいoverflow: auto

    #myModal {
        max-height: 300px;
        overflow: auto;
    }

    <div id="myModal" class="reveal-modal">
         <h1>Modal Title</h1>
         <p>Any content could go in here.</p>
         <a class="close-reveal-modal">&#215;</a>
    </div>

または、試すことができます

modalBG.delay(options.animationspeed).fadeOut(options.animationspeed);
                        modal.animate({
                            "top":  $(document).scrollTop()-topOffset + 'px',
                            "opacity" : 0
                        }, options.animationspeed/2, function() {
                            modal.css({'top':topMeasure, 'opacity' : 1, 'display' : 'none'});
                            unlockModal();
                        });

また、divの高さを0から100％までアニメーション化するフェードインアニメーションを使用してみて、不透明度がフェードインするときに上にスクロールして戻ることもできます。

編集： jQueryだけを使用した例については、このフィドルを確認してください。

于 2012-05-31T20:10:38.523 に答える