Question

我希望在表单旁边显示一个弹出对话框，其中包含有关如何填写表单的指导。现在我正在使用bootstrap模式。
弹出窗口工作正常，背景页面上可见的链接是可点击的，但无法单击表单的输入字段或向下滚动表单（即模式的原始页面/背景））。

如何通过页面上的弹出窗口（模态）允许访问编辑和向下滚动表单？ [这当然意味着在点击它之外时，模态不应该关闭。]

编辑：表单现在可以滚动，但输入字段不可点击
另外，我注意到这只是firefox中的一个问题，它可以在JSfiddle中工作（点击输入字段）但是不是在火狐浏览器中实际加载时

决赛：
当我看到如何保持模态标题固定时，我找到了这个答案：

.modal-body
  max-height: calc(100vh - 210px)
  overflow-y: auto

使用此代码使我的模态更小，因此模态体可能在firefox中重叠我的表单，导致无法在输入字段中单击的问题！

JSfiddle： http://jsfiddle.net/cxkocanv/1/

在我的'new.html.erb'文件中：

<header>
<h1>New Form</h1>
<a href="#help" data-toggle="modal"><span class="glyphicon glyphicon-question-sign"></span></a>
</header>
            <div id="help" class="modal fade pull-right" role="dialog">
              <div class="modal-dialog">
              <div class="modal-content">
              <div class="modal-header">
                <a href="#" title="Close help" class="close" data-dismiss="modal" aria-label="close">&times;</a>
                <h1 class="modal-title">Form Help</h1>
              </div> <!-- /.modal-header -->
              <div class="modal-body">
                <%= render 'help' %>
              </div>  <!-- /.modal-body -->
              </div> <!-- /.modal-content -->
              </div> <!-- /.modal-dialog -->
            </div> <!-- /help -->
        <%= render 'form' %>

在我的'application.css.sass'文件中：

.modal-backdrop
  display: none !important
#help
  margin-left: 50%
.modal-backdrop
  display: none !important
body.modal-open
  overflow: visible /* this line allowed form to be scrollable */

Answer 1

最后，我可以在输入字段中单击并使用屏幕上的引导模式滚动背景。（仍未在IE中完全正常工作）

.modal-backdrop
  display: none !important
#help
  margin-left: 50%
.modal-backdrop
  display: none !important
body.modal-open
  overflow: visible /* this line allowed form to be scrollable */
.modal-body /* this section allowed form input-fields to be clickable */
  max-height: calc(100vh - 210px)
  overflow-y: auto

Answer 2

所有关于数据背景的内容以及您是否可以禁用键盘

<a href="#help" data-toggle="modal" data-backdrop="static" data-keyboard="false">

Bootstrap Modal - 使背景可点击而不关闭模态

2 个答案: