web-dev-qa-db-ja.com

Bootstrapモーダルの問題-スクロールが無効になります

私にはモーダルがあり、そのモーダル内には、大きな非表示のコンテンツを表示するドロップダウンがあります。

これで、最初のモーダルの上にスタックされた次のモーダルを開いて閉じると、その下のモーダルのスクロールが無効になります。

私が直面している問題を再現する手順を含む完全な例を作成しました。それを見ることができます ここ 。

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet">
    <title></title>
    <style>

    </style>
</head>
<body>


    <input type="button" data-toggle="modal" data-target="#modal_1" class="btn btn-lg btn-primary" value="Open Modal 1" >

    <div class="modal fade" id="modal_1">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">First Modal</h4>
                </div>
                <div class="modal-body">



                    <form class="form">

                        <div class="form-group">
                            <label>1) Open This First: </label>
                            <input type="button" data-toggle="modal" data-target="#modal_2" class="btn btn-primary" value="Open Modal 2" >
                        </div>

                        <div class="form-group">
                            <label>2) Change this once you have opened the modal above.</label>
                            <select id="change" class="form-control">
                                <option value="small">Show Small Content</option>
                                <option value="large">Show Large Content</option>
                            </select>
                        </div> 

                        <div id="large" class='content-div'>
                            <label>Large Textarea Content.. Try and scroll to the bottom..</label>
                            <textarea rows="30" class="form-control"></textarea>

                        </div>

                        <div id="small" class='content-div'>
                            <label> Example Text Box</label> 
                            <input type="text" class="form-control">
                        </div>  


                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


    <div class="modal fade" id="modal_2">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title">Second Modal</h4>
                </div>
                <div class="modal-body">

                    <hp>This is the stacked modal.. Close this modal, then chenge the dropdown menu, you cannot scroll... </h5>

                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>


</body>
<script src="http://code.jquery.com/jquery-1.11.0.min.js" type="text/javascript"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js" type="text/javascript"></script>
<script>

    $(document).ready(function() {


        $(".content-div").hide();
        $("#change").change(function() {
            $(".content-div").hide();
            $("#" + $(this).val()).show();
        });


    });

</script>
</html>

動作の動作を示すBootplyは次のとおりです。

ブートプライ

jqueryhtmltwitter-bootstrap
50
Carl Smith

これも解決策です

.modal {
  overflow-y:auto;
}

http://www.bootply.com/LZBqdq2jl5

Autoは正常に動作します:)これにより、実際に画面サイズよりも高いモーダルが修正されます。

68
Jake Taylor

これは、モーダルを閉じると、modal-openタグから<body>が削除されるためです。 Bootstrapは、同じページ上の複数のモーダルをサポートしていません（少なくともBS3までは）。

動作させる1つの方法は、モーダルを閉じるときにBSによってトリガーされるhidden.bs.modalイベントを使用し、ボディにmodal-openクラスを強制するために他のモーダルが開いているかどうかを確認することです。

// Hack to enable multiple modals by making sure the .modal-open class
// is set to the <body> when there is at least one modal open left
$('body').on('hidden.bs.modal', function () {
    if($('.modal.in').length > 0)
    {
        $('body').addClass('modal-open');
    }
});
43
Molkobain

解決策を見つけました。なぜ機能しないのかはわかりませんが、CSSの1行のコードで問題を解決できます。 2番目のモーダルを閉じた後、最初のモーダルは何らかの形でoverflow-y:hiddenを取得しています。実際にautoに設定されている場合でも。

これを書き換えて、CSSで独自の宣言を設定する必要があります。

#modal_1 {
    overflow-y:scroll;
}

ここには、有効な DEMO があります

編集：間違ったリンク、申し訳ありません。

34
Kamil

フォロー https://github.com/nakupanda/bootstrap3-dialog/issues/7 add

.modal { overflow: auto !important; }

あなたのCSSに

9
truongpmcs
$(document).ready(function () {

 $('.modal').on("hidden.bs.modal", function (e) { //fire on closing modal box
        if ($('.modal:visible').length) { // check whether parent modal is opend after child modal close
            $('body').addClass('modal-open'); // if open mean length is 1 then add a bootstrap css class to body of the page
        }
    });
});
//this code segment will activate parent modal dialog 
//after child modal box close then scroll problem will automatically fixed
9
KATJ Srinath

まず、複数のオープンモーダルはBootstrapでサポートされていません。こちらをご覧ください： Bootstrap Modal docs

複数のオープンモーダルはサポートされていません。別のモーダルが表示されている間は、モーダルを開かないでください。一度に複数のモーダルを表示するには、カスタムコードが必要です。

ただし、必要に応じて、CSSの一部をカスタムスタイルシートに追加することができます。ただし、含まれている限りafter main Bootstrapスタイルシート：

.modal {
    overflow-y:auto;
}
4
FastTrack

これはTwitterブートストラップのバグが原因だと思います。 2つのモーダルが開いていても、modal-openクラスを本体から削除するようです。 jQueryのremoveClass関数のテストに参加し、モーダルがまだ開いている場合はそれをバイパスできます（基本関数のクレジットはこの答えに行きます： https://stackoverflow.com/a/1950199/ 854246 ）。

(function(){
    var originalRemoveClassMethod = jQuery.fn.removeClass;

    jQuery.fn.removeClass = function(){
        if (arguments[0] === 'modal-open' && jQuery('.modal.in').length > 1) {
            return this;
        }
        var result = originalRemoveClassMethod.apply( this, arguments );
        return result;
    }
})();
2
Joseph Marikle

data-dismiss="modal"を削除して追加することで問題を解決しました

setTimeout(function(){ $('#myModal2').modal('show') }, 500);
$('#myModal1').modal('hide');

それが役に立てば幸い

2
Sunny A

JQuery経由でクラス「modal-open」を本文に追加します。スクロールは、モーダル以外のすべてで機能すると考えられます。

前の応答へのコメントとして：オーバーフロープロパティをモーダルに（CSSを介して）追加すると役立ちますが、ページに2つのスクロールバーが表示されます。

0
user3947257

これも解決策です

.modal.fade .modal-dialog{
   -webkit-transform: inherit;
}
0
Sameera Prasad Jayasinghe

Bootstrap3または4を使用している場合は、html本文にモーダルオープンクラスがあることを確認してください。これが必須かどうかはわかりませんが、モーダル背景のz-indexがクリアされていることを確認してください。

    $('.your-second-modal').on('hidden.bs.modal', function (e) {
        $('.your-second-modal').css('z-index', "");
        $('.modal-backdrop').css('z-index', 1040);
        $('body').addClass("modal-open");
    });
0
lechat

私は実際にこれに対する解決策を見つけました。 $('#myModal').hide();を使用してモデルを非表示にしている場合、実際にページ本体のスクロールを有効にする必要があります。 $('#myModal').hide();の後に次の行を書くだけです。

$('body').attr("style", "overflow:auto")

これにより、スクロールが再び有効になります。

0
Jordan

bootstrap 4の場合、！Importantを追加する必要がありました

.modal {
    overflow-y: auto !important;
}

これが行われない場合、機能せず、適用されません。

ここに画像の説明を入力

0
Manu Burrero Sánchez

このコードは私の問題を解決しました。2番目のポップアップが閉じられると、私の最初のポップアップはスクロールできなくなります。

$('body').on('hidden.bs.modal', '#SecondModal', function (e) {
  if ($('#FirstModal').is(':visible')) { // check if first modal open 
    $('body').addClass('modal-open'); // re-add class 'modal-open' to the body because it was removed when we close the second modal
    $('#FirstModal').focus(); // Focus first modal to activate scrollbar
  }
});
0
Aurelie PATRICIA