2016-12-08 12 views
1

私のコントロールできない理由により、まだブートストラップ2.3.2を使用しています。 1から50行の情報をどこにでも表示できるモーダルポップアップがあります。私はそれが私が画面に収まるようにできる最大のサイズを作って、中間部分を作った、.modal-bodyは必要に応じてスクロールバーを持っています。それをポップアップする前$('#confirm-popup-subject')$('#confirm-content')を埋めるためにJavaScriptでモーダルポップアップを必要に応じてスクロールバーで十分に大きくする

<div id="confirm-popup" class="modal hide fade" role="dialog" 
    aria-labelledby="confirm-popup-subject" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="confirm-popup-subject">XXX</h3> 
    </div> 
    <div class="modal-body" id="confirm-content"> 
    </div> 
    <div class="modal-footer"> 
    <button id="confirm-popup-edit" class="btn" data-dismiss="modal" 
    aria-hidden="true">Edit</button> 
    <button id="confirm-popup-cancel" class="btn" data-dismiss="modal" 
    aria-hidden="true">Cancel</button> 
    <button id="confirm-popup-submit" class="btn btn-primary" 
    aria-hidden="true" data-dismiss="modal">Create Ticket</button> 
    </div> 
</div> 

:私のHTMLは次のようになります。

は、私はこれを取得するには、以下のCSSオーバーライドを使用:

#confirm-poup { 
    top: 2%; 
    bottom: 2%; 
    overflow: initial; 
} 

#confirm-popup .modal-body { 
    overflow-y: auto; 
    max-height: 80%; 
} 

これは、ダイアログは、画面のほとんどを取るなり、それがスクロールバーを必要とする場合には、それを持っています。しかし今、顧客は、表示するテキストが数行しかないときにはそれを大きくしたくないと言っています。彼らはそれがボディーテキストが画面に収まらない場合は、モーダルボディ上にスクロールバーを持つことができるように、ボディーテキストを入力できる最小サイズにしたいと思っています。これは可能ですか?いくつかの実験の後

+0

あなたのポップアップは一定のサイズでなければならないということですか?あなたのコンテンツがデフォルトサイズより大きければ、モデル本体は大きくなるのではなくスクロールを取得する必要があります??? –

+0

@ShalinPatelいいえ私はそれが必要に応じて拡大したいですが、一度それが画面に収まる最大になると、それはモーダルボディのちょうどスクロールバーを取得します。 –

答えて

0

私はこれにCSSを変更した場合、私は許容できる結果を得た:

#confirm-popup { 
    overflow: initial; 
    top: 2%; 
} 
#confirm-popup .modal-body { 
    overflow-y: auto; 
    max-height: 70vh; 
} 

それは完璧ではない - 私は、ブラウザがあまりにも短くした場合、それが画面に重なって - それは、すべてのサポートされているブラウザで動作しますサイズ。

関連する問題