Bootstrap 模态中的 Bootstrap 模态中断内部 boostrap 模态滚动 [英] Bootstrap modal within bootstrap modal breaks inner boostrap modal scrolling

查看：27
本文介绍了Bootstrap 模态中的 Bootstrap 模态中断内部 boostrap 模态滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

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

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

http://www.bootply.com/eoiFo2yfPb

启动演示模式

<!-- 模态体的开始--><div class="modal-body"><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p>模态中的一些文本.</p><p><a href="#" data-toggle="modal" data-target="#upload-avatar" class="button"><i class="fa fa-plus"></i>上传新头像</p>

<!-- 申请表格模态体结束--><div class="modal-footer"><button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>

</div><!--/.modal-content --></div><!--/.modal-dialog --><!--上传照片的模式--><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">上传新头像</h4>

<div class="modal-body"><p>请选择要上传的文件.仅限 JPG、PNG、GIF.</p><表单角色=表单"><div class="form-group"><label for="file">文件输入</label><input type="file" id="file"><p class="help-block">文件最大仅 5Mb.</p>

<button type="button" class="hl-btn hl-btn-default" id="btnUploadCancel">取消</button><button type="button" class="hl-btn hl-btn-green">上传</button></表单>

</div><!--/.modal-content --></div><!--/.modal-dialog -->

这个问题之前被问过，但它没有工作代码链接或工作答案

解决方案

可能来晚了，找到这个

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

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

I have a bootstrap modal that callls another bootstrap modal.

My first modal is vertically scollable. However when I open my 2nd modal and close it again it doesn't allow the first modal to be scrolled anymore.

My first modal is much larger so it has to be open while the 2nd modal is being modal over it.

http://www.bootply.com/eoiFo2yfPb

Launch demo modal 

<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>

The question has been asked before but it has no working code link or working answer

解决方案

maybe is too late, found this

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

just bind the close event and add "modal-open" class to body. worked for me.

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

查看全文
相关文章
其他开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆