私はモーダルフォームのサイズを変更しようとしています。つまり、そこでレンダリングするコンテンツに応答するようにしています。私はそれをフォームのレンダリングに使用しており、必要に応じてスクロールを処理することを望んでいます。
私がレンダリングするフォームには、おそらくさらに50pxが必要です-ボタンがないだけです。
そのため、application.css.scssファイルの.modalスタイルを上書きしてみましたが（Rails 3.2を使用）、max-heightとオーバーフローデクレレーションが上書きされているようです。
何かご意見は？
回答:
私はまったく同じ問題を抱えていました、あなたは試すことができます：
.modal-body {
max-height: 800px;
}スクロールバーがモーダルダイアログの本体セクションにのみ表示されることに気付いた場合、これは本体のみの最大高さを調整する必要があることを意味します。
Bootstrap 3の場合：
.modal-dialog{
width:whatever
}#modal_ID .modal-dialog { width: 800px }
幅と高さの2つの方法を組み合わせると、良いハックがあります。
CSS：
#myModal .modal-body {max-height: 800px;}jQuery：
$('myModal').modal('toggle').css({'width': '800px','margin-left': function () {return -($(this).width() / 2);}})これは私が使うものです。幅と高さの両方のマージンとスクロールバーの問題を修正しますが、コンテンツに合わせてモーダルのサイズを変更しません。
お役に立てば幸いです。
私は答えを得ました...ブートストラップモーダルにmax-height属性を上書きしたことで、500pxの高さ制限を超えてサイズを変更できます
「.modal-body」の高さを100％に設定するだけです。コンテンツごとに高さが自動調整され、画面ごとに「max-height」が配置されます...
サイズパラメータを試しましたか。
return $modal.open({
backdrop: 'static',
size: 'sm',
templateUrl: "app/views/dialogs/error.html",
controller: "errorDialogCtrl",オプションのサイズ
モーダルには2つのオプションサイズがあり、.modal-dialogに配置するモディファイアクラスを介して利用できます。
別のものが必要な場合は、bootstarp.cssを更新してください
@media (min-width: 768px) {
.modal-dialog {
width: 600px;
margin: 30px auto;
}
.modal-content {
-webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
}
.modal-sm {
width: 300px;
}
.modal-xy { // custom
width: xxxpx;
}
}
@media (min-width: 992px) {
.modal-lg {
width: 900px;
}
}Boostrap> 4の場合、これは私にとってうまくいきました：
.modal-content{
width: 1200px;
}より高度なバージョン：
body .modal-content{
width: 160%!important;
margin-left: -30%!important;
}ここにコードペンがあります：
モーダルにmodal1次のCSSのIDがあるとすると、モーダルの高さが増加し、オーバーフローが表示されます。
#modal1 .modal-body{
max-height: 700px;
overflow: visible;
}（モーダルで画像を表示するために）幅と高さの特定のサイズを設定する必要があるため、上記のいくつかを試してみましたが、上記のどれも役に立たなかったので、スタイルをオーバーライドすることに決め、次のコードをメインの<div>に追加しましたその中のclass = "modal hide fade in"：つまり、モーダルの背景のスタイルタグに幅を追加しました。
style="display: none; width:645px;"次に、次の「スタイル」タグをモーダル本体に追加します。
<div class="modal-body" style="height:540px; max-height:540px; width:630px; max-width:630px;">今は魅力のように機能し、画像を表示しています。
これは私のために働きました：
#modal1 .modal
{
overflow-y: hidden;
}
#modal1 .modal-dialog
{
height: 100%;
overflow-y: hidden;
}私の場合、ネストされたモーダルがあり、ネストされたモーダル内でコントロールの表示を切り替えるときに異なる高さを必要とするコントロールがあるため、max-heightを適用できず、代わりにheight：100％がうまく機能します。
私は最近これを試していて、これを正しく得ました：これが役に立てば幸い
.modal .modal-body{
height: 400px;
}これにより、モデルの高さが調整されます。
ブートストラップモーダルのサイズを増やす別の簡単な方法を次に示します。
$(".modal-dialog").css("width", "80%");モーダルの幅は、画面のパーセンテージで指定できます。上記の例では、画面幅の80％に設定しています。
以下は同じものの実際の例です：
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$(".modal-dialog").css("width", "90%");
});
</script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>