jQueryでライトボックスウィンドウを作成する方法は、コンテンツの最後に終了するか、内容が収まらない場合はスクロールバーを表示しますか？

Question

jQuery を使用してライトボックスウィンドウを作成する必要があります。プラグインはありません。オーバーレイは、ページ内にあるコンテンツと共に表示する必要があります。

ブラウザのウィンドウがコンテンツに適合するほど高くない場合、スクロールバーがコンテンツの定義された部分に表示されるように誰かに教えてくださいまた、ページの読み込み時にウィンドウのサイズが十分に大きい場合は、サイズを調整する必要があります。ユーザーがウィンドウを縮小すると、コンテンツの定義された部分の周りに垂直スクロールバーが表示されます。

ライトボックスは常にページ上部から100ピクセルの位置に表示されます。内容がそれほど高くない場合、ライトボックスの下部はコンテンツが終了する場所で終了する必要があります。内容が非常に高く、ウィンドウの下部にすべてが表示されない場合は、スクロールバーがライトボックスコンテンツの指定されたセクションに表示されます。

これはIE7 +で動作する必要があります。

Answer 1

これは指定した100ピクセルの余白と、エレメントの最下部とウィンドウの最下部との間の100ピクセルの余白に合わせて設計されています。ウィンドウのサイズが変更されると、ウィンドウの高さが以前に押し下げられたライトボックスの高さよりも大きい場合（その高さが 'auto'に設定されます）、関数は緩やかな高さよりも短くなります（この場合、新しいウィンドウの高さと一致するようにライトボックスを再度スキッシュする必要があります）。

<div id="myLightBox"> 
    <div id="myScrollPane"> 

     <!-- Content here --> 

    </div> 
</div> 
<script type="text/javascript"> 
function resizeLightBox(i) 
{ 
    if (window.innerHeight < $('#myLightbox').height() + 200) 
    { 
     var newHeight = (window.innerHeight - 200) + 'px'; 
     $('#myLightBox').css('height', newHeight); 
     $('#myScrollPane').css('height', newHeight); 
     $('#myScrollPane').css('overflow-y', 'scroll'); 
    } 
    else 
    { 
     $('#myLightBox').css('height', 'auto'); 
     $('#myScrollPane').css('height', 'auto'); 
     $('#myScrollPane').css('overflow-y', 'visible'); 
    } 
    if (i > 0) 
    { 
     i--; 
     resizeLightBox(i); 
    } 
} 

window.onload = function(){resizeLightBox(1)}; 
window.onresize = function(){resizeLightBox(2)}; 
</script>