title: Bootstrap Modal - make background clickable without closing out modal
body: <p>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. <br>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). <br><br> 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.]
  <br><br>
  <b>EDIT:</b> form is now scrollable, but input-fields are not clickable<br>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
  <br><br>
  <b>Final: </b> <br>
  When looking to see how I can keep the modal header fixed I found this answer:<br></p>
  
  <pre><code>.modal-body
    max-height: calc(100vh - 210px)
    overflow-y: auto
  </code></pre>
  
  <p>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!</p>
  
  <hr>
  
  <p><br><br><b>JSfiddle: </b><a href="http://jsfiddle.net/cxkocanv/1/" rel="nofollow">http://jsfiddle.net/cxkocanv/1/</a></p>
  
  <p><br>In my 'new.html.erb' file:<br></p>
  
  <pre><code>&lt;header&gt;
  &lt;h1&gt;New Form&lt;/h1&gt;
  &lt;a href="#help" data-toggle="modal"&gt;&lt;span class="glyphicon glyphicon-question-sign"&gt;&lt;/span&gt;&lt;/a&gt;
  &lt;/header&gt;
              &lt;div id="help" class="modal fade pull-right" role="dialog"&gt;
                &lt;div class="modal-dialog"&gt;
                &lt;div class="modal-content"&gt;
                &lt;div class="modal-header"&gt;
                  &lt;a href="#" title="Close help" class="close" data-dismiss="modal" aria-label="close"&gt;&amp;times;&lt;/a&gt;
                  &lt;h1 class="modal-title"&gt;Form Help&lt;/h1&gt;
                &lt;/div&gt; &lt;!-- /.modal-header --&gt;
                &lt;div class="modal-body"&gt;
                  &lt;%= render 'help' %&gt;
                &lt;/div&gt;  &lt;!-- /.modal-body --&gt;
                &lt;/div&gt; &lt;!-- /.modal-content --&gt;
                &lt;/div&gt; &lt;!-- /.modal-dialog --&gt;
              &lt;/div&gt; &lt;!-- /help --&gt;
          &lt;%= render 'form' %&gt;
  </code></pre>
  
  <p><br>
  In my 'application.css.sass' file:<br></p>
  
  <pre><code>.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 */
  </code></pre>