Bootstrap Modal - 使背景点击而不关闭模式 [英] Bootstrap Modal - make background clickable without closing out modal

问题描述

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

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



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


最后：

当我看到如何保持模态头的固定时，我发现了这个答案：

  .modal-body 
最大高度：calc（100vh  -  210px）
溢出-y：auto 
  

使用这段代码使得我的模式变得更小，所以可能的模式体与Firefox中的表单重叠，导致无法点击输入的问题 //jsfiddle.net/cxkocanv/1/rel =nofollow> http://jsfiddle.net/cxkocanv/1/

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

  <报头GT; 
< h1>新表格< / h1> 
< a href =＃helpdata-toggle =modal>< span class =glyphicon glyphicon-question-sign>< / span>< / a> 
< / header> 
< div id =helpclass =modal fade pull-rightrole =dialog> 
< div class =modal-dialog> 
< div class =modal-content> 
< div class =modal-header> 
< a href =＃title =Close helpclass =closedata-dismiss =modalaria-label =close>& times;< / a> 
< h1 class =modal-title>表单帮助< / h1> 
< / div> <！ -  /.modal-header  - > 
< div class =modal-body> 
<％=渲染'help'％> 
< / div> <！ -  /.modal-body  - > 
< / div> <！ -  /.modal-content  - > 
< / div> <！ -  /.modal-dialog  - > 
< / div> <！ -  / help  - > 
<％=呈现'表格'％> 
  

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

  .modal-backdrop 
显示：无！重要
＃帮助
保证金：50％
 .modal-backdrop 
 display：none！important 
 body.modal-open 
 overflow：visible / *此行允许表单滚动* / 
  

解决方案

最后，我们可以点击输入字段并滚动浏览背景在屏幕上使用自举模式。 （在IE中仍然无法正常工作）

  .modal-backdrop 
 display：none ！重要
＃帮助
保证金 - 剩余：50％
 .modal-backdrop 
显示：无！重要
 body.modal-open 
溢出：可见/ *此行允许表单滚动* / 
 .modal-body / *此部分允许表单输入字段可点击* / 
最大高度：calc（100vh  -  210px）
 overflow-y：auto 
  

I would like to have a pop up dialog appear next to a form with guidance on how to fill out the form. Right now I am using a bootstrap modal.
The pop up works fine and links that are visible on the background page are clickable, but there is no ability to click in the input fields of the form or scroll down the form (i.e. the original page/background of the modal).

How can I allow access to editing and scrolling down the form with a pop-up (modal) present on the page? [this of course would mean the modal shouldn't close when clicking outside of it.]

EDIT: form is now scrollable, but input-fields are not clickable
Also, I am noticing this is only an issue in firefox, it works in the JSfiddle (clicking in input fields) but not when actually loading in firefox browser

Final:
When looking to see how I can keep the modal header fixed I found this answer:

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

Using this code made my modal smaller so possibly the modal body was overlapping my form in firefox, causing the issue of not being able to click in the input fields!

---

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

In my 'new.html.erb' file:

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

In my 'application.css.sass' file:

.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 */

解决方案

Finally am able to click in the input fields and scroll through the background with a bootstrap modal on the screen. (still not working fully in 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

这篇关于Bootstrap Modal - 使背景点击而不关闭模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！