4

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 */
Gcap
  • 378
  • 6
  • 11
  • 25
  • 1
    Would a popover do the job better than a modal? – mgiesa Dec 04 '15 at 20:07
  • I don't think so, it's a lot of content that I actually have (can't show for security reasons) and the content inside the popup would have to be persistent and style-able – Gcap Dec 04 '15 at 20:19

2 Answers2

1

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
Gcap
  • 378
  • 6
  • 11
  • 25
0

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">
Elow
  • 597
  • 3
  • 9
  • 1
    I've tried out `data-backdrop="static"` and still input-fields are not clickable – Gcap Dec 04 '15 at 19:32
  • 2
    Could u make a jsfiddle with the full code to look into? – Elow Dec 04 '15 at 19:33
  • 1
    Just added it, and also a note that the input fields are clickable in chrome and IE but not firefox – Gcap Dec 04 '15 at 20:01
  • Have u managed to make it work? Because on my firefox it's working fine, the field text is clickable when modal is open – Elow Dec 07 '15 at 13:39
  • Still not working and for multiple people using firefox @elow – Gcap Dec 07 '15 at 18:16