Bootstrap Modal - make background clickable withou

Question

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

Answer 1

It's all about the data-backdrop and also if you want to can disable the keyboard

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

Answer 2

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