Question

我有一个bootstrap模式，可以调用另一个bootstrap模式。

我的第一个模态是可垂直分解的。然而，当我打开我的第二个模态并再次关闭它时，它不再允许第一个模态滚动。

我的第一个模态要大得多，所以它必须是打开的，而第二个模态是模态的。

http://www.bootply.com/eoiFo2yfPb

启动演示模式

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            <h4 class="modal-title" id="myModalLabel">Application Form2</h4>
        </div>

        <!-- START OF MODAL BODY-->

        <div class="modal-body">          
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
                <p>Some text in the modal.</p>
            <p>

            <a href="#" data-toggle="modal" data-target="#upload-avatar" class="button"><i class="fa fa-plus"></i> Upload new avatar</a>
            </p>
        </div>

        <!-- END OF APPLICATION FORM MODAL BODY -->

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


<!--Modal for uploading photo-->
<div class="modal" id="upload-avatar" tabindex="-1" role="dialog" aria-labelledby="upload-avatar-title" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
          <h4 class="modal-title" id="upload-avatar-title">Upload new avatar</h4>
        </div>
        <div class="modal-body">
          <p>Please choose a file to upload. JPG, PNG, GIF only.</p>
          <form role="form">
            <div class="form-group">
              <label for="file">File input</label>
              <input type="file" id="file">
              <p class="help-block">Files up to 5Mb only.</p>
            </div>
            <button type="button" class="hl-btn hl-btn-default" id="btnUploadCancel">Cancel</button>
            <button type="button" class="hl-btn hl-btn-green">Upload</button>
          </form>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div>

问题已被提出before，但它没有可用的代码链接或工作回答

Answer 1

这似乎是Bootstrap中的一个错误。打开模态时，“模态打开”类将添加到正文中，并在关闭模态时删除。这个类可以滚动模态。

请使用此解决方法：

$('#btnUploadCancel').click(function(){
    $('#upload-avatar').modal('toggle');
    $('body').addClass('modal-open'); // This recovers the class 'modal-open'
});

Answer 2

也许为时已晚，发现了这个

http://seegatesite.com/how-to-resolve-multiple-modal-dialog-scrollbar-in-bootstrap-v-3-3-5/

只需绑定close事件并将“modal-open”类添加到body。为我工作。

Bootstrap模态中的Bootstrap模态打破内部boostrap模态滚动

2 个答案: