Question

在bootstrap 3中 - 如果你打开一个模态，然后在打开第二个模态之前隐藏它，垂直滚动条会消失在第二个模态上。任何人对如何解决这个问题都有任何想法？

<a data-toggle="modal" href="#Modal1" class="btn btn-info">Open Modal 1</a>

<div id="Modal1" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-label">Modal 1</h4>
            </div>
        <div class="modal-body">
            <p><a href="#" id="btn2" class="btn btn-info">Open Modal 2</a></p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
        </div>
    </div> <!--modal-content-->
</div> <!--modal-dialog-->

<div id="Modal2" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 id="modal-label">Modal 2</h4>
            </div>
        <div class="modal-body">
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
            <p>Content.</p>
        </div>
    </div> <!--modal-content-->
</div> <!--modal-dialog-->

<script>
$(document).on("click", "#btn2", function (e) {
            e.preventDefault();
            //$('.modal.in').modal('hide')
            $('#Modal1').modal('hide');
            $('#Modal2').modal('show');
});
</script>

Answer 1

而不是这个

 $('#Modal1').modal('hide');
 $('#Modal2').modal('show');

使用

 $('#Modal1').modal("hide");
 $('#Modal2').modal("show");

就是这样......

更新

<div id="Modal2" class="modal fade" style="overflow:scroll">

Answer 2

我有一个css解决方案。使用下面的这个CSS。

Intent yourIntent = new Intent(this, YourActivity.class);
// You can send extra info (as a bundle/serializable) to your activity as you do 
// with a normal intent. This is not necessary of course.
yourIntent.putExtra("ExtraInfo", extraInfo); 
// The following flag is necessary, otherwise at least on some devices (verified on Samsung 
// Galaxy S3) your activity starts, but it starts in the background i.e. the user
// doesn't see the UI
yourIntent.setFlags(Intent.FLAG_ACTIVITY_REORDER_TO_FRONT);
PendingIntent pendingIntent = PendingIntent.getActivity(getApplicationContext(), 0, 
                                                        yourIntent, 0);
try {
    pendingIntent.send(getApplicationContext(), 0, yourIntent);
} catch (Exception e) {
    Log.e(TAG, Arrays.toString(e.getStackTrace()));
}

Answer 3

我最终通过覆盖css修复它：

.modal {
   overflow: auto;
}

工作小提琴：http://jsfiddle.net/qfvnmbfd/2/

如何修复第二个bootstrap模式松动垂直滚动条

3 个答案: