jQueryの "スクロール可能な"モーダルウィンドウのプラグインはどこにありますか?

SimpleModal、LightBoxのようないくつかの異なる設定オプションを試してみました...これらは軽量で柔軟な設定がありますが、私は1つ欠けています:私はスクロールモーダルウィンドウが必要です高さ)、またはpinterest.comのピンプレビューモーダル、任意の提案ですか?

7

2 答え

$(window).scroll(function(){
    if($('#ux-dialog-test-container').dialog('isOpen') === true){
        var dialogHeight = $('.ui-dialog').height();
        var windowHeight = $(window).height();
        var documentHeight = $(document).height();
        var scrollLength = documentHeight - windowHeight;
        var currentScrollTop = $(window).scrollTop();
        var scrollPercentage = currentScrollTop/scrollLength;
        var pixelsToSubtract = dialogHeight * scrollPercentage;
        var newTop = 32 - pixelsToSubtract;
        $('.ui-dialog').animate({top: newTop + 'px'}, 15, 'swing');
    }
});

私はこれについて古い質問があることを知っていますが、私は同じ問題に苦労しており、これが適切な解決策であることを発見しました。基本的に、モーダルダイアログをスクロールするという錯覚を与えます。実際にはスクロールダウンするときに上を上にしています。スクロールしたウインドウの割合を計算し、そのパーセントを "top:" CSSプロパティを調整するために使用しました。私の場合、トップは32pxに設定されていました。私の計算で調整したのが分かります。これが誰かを助けることを願っています!

ああ!スクロールのロックを解除するために、別のスレッドから盗んだものが必要です(つまり、クロムでは、スクロールバーのクリックイベントはmodal:trueの場合は抑制されます)

if ($.ui && $.ui.dialog) {
    $.ui.dialog.overlay.events = $.map('focus,keydown,keypress'.split(','), function(event) { return event + '.dialog-overlay'; }).join(' ');
}

私はこれがIE8 +だけでなく、ChromeとFFで動作することを知っています。

編集:ダイアログが開いているかどうかを確認するためのチェックが追加されました。

4
追加された
1
追加された
これは正確に私が探しているものではありません..私はブラウザの垂直スクロールバーでモーダルウィンドウをスクロールできる必要がありますが、このモーダルウィンドウ内にスクロール可能なコンテンツはありません。
追加された 著者 Faustas Misiunas,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript