Bootstrap - Editing TextArea Behind Modal

Question

I have a web page that uses Bootstrap 3. In this page, I need to have a text area that a person can put their answer in. The answer is to a story problem. The story problem appears in a modal dialog. The setup can be seen in this Bootply. The code looks like this:

<div class="container">
  <form>
    <div class="form-group">
      <label>Answer (<a id="showProblemLink" href="#">view problem</a>)</label>
      <textarea class="form-control" rows="7">      </textarea>
    </div>
  </form>

  <div id="problemModal" class="modal" tabindex="-1" role="dialog">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-body">
            <p>
            The local school wants a new playground.
            The lot they can use for the playground is shaped like a rectangle.
            The school has decided to let the students design the new playground.
            The students have decided that they want 1/4 of the playground to be a football field.
              Another 3/8 of the lot will be used for a basketball court.
              How much of the lot is remaining for the slides and swings?
            </p>
        </div>

        <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>        
      </div>      
    </div>
  </div>  
</div>

My users want to be able to keep the story problem open in the modal window while they enter their answer. This will let them double-check their answer. The obvious answer is to have them re-open the dialog. But, apparently, this isn't good enough. I really need to keep the dialog open and let the user enter data in the text area behind/under it. Seems weird to me. But, that's what I gotta do.

My problem is, when I click on the textarea, the dialog disappears. I tried adding data-backdrop="false". While that kept dialog open, it didn't let me actually edit the textarea. What am I missing?

Answer 1

Actually it is very simple to get exactly what you want.

What you are actually looking for is a Dialog and not a Modal.

Here is a working example using jQuery UI Dialog.

---

Explanation:

• A modal is designed to block user interaction with the application.
• A dialog looks and acts similar, but is designed to let the user continue interacting with the page (You can set it manually to block everything if you want)

Here is a SO discussion about it

---

Some details about the example:

By default a dialog is draggable by the header. I kept the example similar to your modal so I took out the header by using:

dialogClass: 'dialog-modal'

And

.dialog-modal .ui-dialog-titlebar {
  display:none;
}

To make the whole dialog draggable I used:

draggable: false

And

.parent().draggable();

If you actually do want a header, you can delete all these parts. Here is an example with a header

Answer 2

What you are trying to achieve is not easily possible.

• Hiding modal background - easy
• Moving whole modal div - medium
• Making the text area behind the modal take the focus - very hard

I understand you want to save space on the page, that's why I would suggest the cleanest option and closest to what you are trying to achieve: Bootstrap Collapse

DEMO here