ダイアログのテキストが長すぎるときに私はsimpleModalプラグイン <a href="http://www.ericmmartin.com/projects/simplemodal/" rel="nofollow">http://www.ericmmartin.com/projects/simplemodal/</a> を使用していますかsimpleModalプラグイン

Question

で使用するスクロール、モーダルを用いた場合であっても、私はスクロールしようとするが、ページ全体をスクロールしている：真。

私はダイアログの最後を見ることができません、私はmaxHeightを定義しようとしましたが、効果がないようです。

コード：

function loadDialog(Code,vrsnNum) 
{ 
    vrsnNum=vrsnNum-1; 
    $.get(
    "/ajaxVerision.asp", 
    {Code: Code,VerisionNum: vrsnNum}, 
    function(data) 
    { 
    $(".CrnrPager").html(data); 
    } 
    ); 

    $.get(
    "/ajaxVerisionNext.asp", 
    {Code: Code,VerisionNum: vrsnNum}, 
    function(data) 
     { 
     $("#sp1").html(data); 
     } 
    ); 

    $('#basic-modal-content').modal({maxHeight: 400,autoPosition : true, position: ['20%','25%']}); 
} 

Answer 1

あなたはmodal()コールにいくつかのCSSを割り当てるしようとすることができ、このような何か：また

$('#basic-modal-content').modal({ 
    maxHeight: 400, 
    autoPosition: true, 
    containerCss: { 
     'maxHeight' : '400px', 
     'overflow' : 'auto' 
    }, 
    position: ['20%', '25%'] 
}); 

あなたにも利用できるdataCss性質を持っています。

Answer 2

これは、CSSでcalcを使用するようになりましたかなり安全ですので、これは私が

$('#confirmDialog').modal(
{ 
    dataCss: 
    { 
      'maxHeight': 'calc(100vh - 10em)', // spaces are needed 
      'overflow': 'auto' 
    } 
}); 

をやっているこれは、ダイアログの上方と下方に少なくとも10em（5emいずれかの側）のままに述べています。幸いにも、ウィンドウのサイズを変更しても、これはすべてうまく調整されます。

私はcalc関数を100vh - 10emと使用しています。これは、ビューポートの高さをとり、1emを減算することを意味します。これはネストされた要素なので、100%はここでは使用できません。残念ながら、iOSでは100vhにはSafariのアイコンバーによって隠されているスペースが含まれていますので、常に見えるように10emを引く必要がありました。

注：私はdataCssを使用しています。これは、ラッパーではなくコンテンツにスタイル属性を追加します。これは、国境が固定され、コンテンツがその中にうまくスクロールする場合、これが意味します。

iOSのvhをより良く理解するためにこれを読む：https://github.com/scottjehl/Device-Bugs/issues/36