引导模态内部模态背景滚动 [英] Bootstrap modal inside modal background scrolling

问题描述

我有一个内容很长的模态，还有一个可以打开另一个模态的按钮.当我关闭内部模态时，外部模态被卡住.它无法滚动，而是背景开始滚动.

I have a modal with a long content and a button that opens another modal. When I close the inner modal, the outer modal is stuck. It cannot be scrolled, rather the background begins to scroll.

我发现了一些与模式和滚动相关的问题，例如模态内部的模态引导和防止主体在打开模态时无法滚动，但我的问题似乎在这里没有重复.

I have found a few questions relating to modal and scrolling like bootstrap modal inside a modal and Prevent BODY from scrolling when a modal is opened, but my issue doesn't seem to be replicated here.

我从

I have forked a fiddle from Bootstrap 3: prevent modal inside modal to trigger (hidden.bs.modal) every time to demonstate this issue. After clicking on the Cancel from the second modal, the first modal is stuck.

代码:

$('#btnUploadCancel').click(function() {
  $('#uploadImage').modal('toggle');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<p>
  Lorem ipsum .... long content
</p>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog modal-sm">
    <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">Demo Modal</h4>
      </div>
      <div class="modal-body">
        <p>
          <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
        </p>
        Lorem ipsum ... long content
        <p>

        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  <div class="modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <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="uploadImage-title">Upload new image</h4>
        </div>
        <div class="modal-body">
          Testing Area
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
          <button type="button" class="btn btn-success">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>

推荐答案

Bootstrap模态(如图所示)会向您的body元素添加一个新的modal-open类.并在关闭时删除modal-open类.

Bootstrap modal when shown adds a new modal-open class to your body element. And when being closed, it removes the modal-open class.

因此，在关闭子模式时，只需要将该类重新应用于body元素即可.这是东西:

So you only need to re-apply that class to your body element when closing the child modal. Here's the thing:

为父模态内的模态添加一个新的自定义css类.

Add a new custom css class for the modals inside your parent modal.

在我的情况下，我使用.child-modal

in my case, I use .child-modal,

/* when using a modal within a modal, add this class on the child modal */
$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

html

<div class="modal fade" tabindex="-1" role="dialog">
     ...
     <a href="#" data-toggle="modal" data-target="#other_modal" title="Help">
       Open the other modal
     </a>
     ...
</div>
<div class="modal fade child-modal" id="other_modal" tabindex="-1" role="dialog">
   ... other codes here ...
</div>

请参见下面的工作片段:

See working snippet below:

$('#btnUploadCancel').click(function() {
  $('#uploadImage').modal('toggle');
});


$(document).find('.child-modal').on('hidden.bs.modal', function () {
    console.log('hiding child modal');
    $('body').addClass('modal-open');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Open demo modal</button>
<p>
  Lorem ipsum .... long content
</p>
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
  <div class="modal-dialog modal-sm">
    <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">Demo Modal</h4>
      </div>
      <div class="modal-body">
        <p>
          <a href="#" data-toggle="modal" data-target="#uploadImage" class="btn btn-primary">Upload image</a>
        </p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        <p>

        </p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
      </div>
    </div>
  </div>
  <div class="modal child-modal" id="uploadImage" tabindex="-1" role="dialog" aria-labelledby="uploadImage-title" aria-hidden="true">
    <div class="modal-dialog modal-sm">
      <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="uploadImage-title">Upload new image</h4>
        </div>
        <div class="modal-body">
          Testing Area
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
          orem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborumorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" id="btnUploadCancel">Cancel</button>
          <button type="button" class="btn btn-success">Accept</button>
        </div>
      </div>
    </div>
  </div>
</div>

这篇关于引导模态内部模态背景滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！