引导模态中的引导模态中断内部引导模态滚动答案

【问题标题】：Bootstrap modal within bootstrap modal breaks inner boostrap modal scrolling引导模态中的引导模态中断内部引导模态滚动
【发布时间】：2016-11-28 14:08:08
【问题描述】：

我有一个引导模式，它调用另一个引导模式。

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

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

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，但它没有有效的代码链接或有效的答案

【问题讨论】：

虽然这并不能解决您的问题：从用户的角度来看，我认为那些堆叠的模式相当烦人。我认为这也是他们似乎不受支持的原因。我认为将第二个模态功能合并到第一个范围内会更好。如果这不是一个选项，请查看jschr.github.io/bootstrap-modal

标签： twitter-bootstrap twitter-bootstrap-3

【解决方案1】：

这似乎是 Bootstrap 中的一个错误。 “modal-open”类在您打开模态时添加到正文中，并在您关闭模态时删除。此类是使模式滚动成为可能的类。

请使用此解决方法：

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

【讨论】：

我知道这是一个迟到的答案。但是为了任何人发现这个，这个几乎可以工作......但不完全。 modal-open 在单击处理程序之后发生的事件中被删除。相反，在关闭模式的 hidden.bs.modal 事件处理程序中恢复 modal-open。

【解决方案2】：

可能为时已晚，找到了这个

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

只需绑定关闭事件并将“modal-open”类添加到正文。为我工作。

【讨论】：