Bootstrap - Editing TextArea Behind Modal

Question

I have a webpage using Bootstrap 3. On this page, I need a text area that a person can respond to. The answer to the problem with the story. The problem of history appears in a modal dialogue. Customization can be seen in this Bootply . The code is as follows:

<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 the story issue to be open in the modal window when they enter their answer. This will allow them to verify their response. The obvious answer is to reopen the dialog. But, apparently, this is not enough. I really need to leave the dialog open and let the user enter data in the text area behind / below it. It seems strange to me. But this is what I have to do.

My problem is that when I click on textarea , the dialog disappears. I tried to add data-backdrop="false" . Although this dialog was open, it did not allow me to edit textarea . What am I missing?

Answer 1

It is actually very simple to get exactly what you want.

What you are really looking for is Dialog , not modal.

Here is a working example using jQuery UI Dialog.

---

Explanation:

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

Here is a SO discussion about it

---

Some details about the example:

By default, the dialog is dragged by the title. I saved an example similar to your modal, so I took the header 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 really want a headline, you can remove all of these parts. Here is an example with a title

Answer 2

My problem is that when I click on the text box, the dialog disappears. I tried to add data-backdrop = "false".

This is because you do not actually click on the text field, you clicked the overlay element that would close the modal click.

I’m not sure that deleting the overlay element will allow you to enter text in the text area, but even I don’t think it’s a good idea (removing the overlay and the ability to do something behind while the modal is still up).

So, I suggest: Click on the modal button when clicked to display another text field. And when you enter something into the text box, it updates the contents inside the main text area.

So the new modal:

See a working example .

Answer 3

What you are trying to achieve is not easy.

• Hide modal background - easy
• Moving an entire modal div - environment
• Creating a text area behind a modal focus is very difficult

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

Demo here

Answer 4

Some solutions I could think of would be the following:

• move your textarea answer to the dialogue in which there is a question.

• or use popover instead of modal.

So here is my example of using popover rather than modal.

A Stackoverflow snippet that looks awful because it lacks the entire bootstrap style, so check the bootply link:

 $(".pop-div > a").popover({ html: true, placement: "left", trigger: "click", title: function() { return $(this).siblings('.pop-title').text() }, content: function() { return $(this).siblings('.pop-content').text() } }); 

 .pop-div { display: inline; } .pop-title, .pop-content { display: none; } .popover-title { font-size: 15px; } .popover-content { font-size: 10px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <form> <div class="form-group"> <label>Answer ( <div class="pop-div"> <a href="javascript:void(0);">view problem</a> <div class="pop-title">Question</div> <div class="pop-content"> <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> )</label> <textarea class="form-control" rows="7"></textarea> </div> </form> </div> 

Answer 5

It took a bit of mess, as this is a strange problem, but here is the solution I came up with.

I made the textarea inside modal, hidden from view, and will capture any typed command while the modal is open. When the user closes the modal mode, the focus returns to the real text area.

HTML (slightly modified):

 <div class="container"> <form> <div class="form-group"> <label>Answer (<a id="showProblemLink" href="#">view problem</a>) </label> <textarea id="outside-modal" class="form-control" rows="7"> </textarea> </div> </form> <div id="problemModal" class="modal" tabindex="-1" role="dialog" data-backdrop="false"> <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> <textarea id="inside-modal"></textarea> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </div> </div> </div>` 

CSS

 textarea#inside-modal { position:absolute; left:-4000px; } 

JQuery

 $("#showProblemLink").on("click", function() { //show the modal $('#problemModal').modal('show'); //fill the hidden textarea with the real textarea contents $('#problemModal textarea#inside-modal').val($('textarea#outside-modal').val()); //capture user input in modal and send to outside textarea $('#problemModal textarea#inside-modal').on('input',function(e) { //fill the outside textarea with the inside textarea contents $('textarea#outside-modal').val($('textarea#inside-modal').val()); }).focus(); }); //when modal closed, send focus back to textarea $("#problemModal").on('hidden.bs.modal',function() { $('textarea#outside-modal').focus(); }); 

See this bootply

Answer 6

An alternative solution would be to use Popover, and on the focal event of the text field you have a modal function.

The advantage of this is that you retain the ability to keep users in the spotlight on which textarea the story belongs, how when deleting an overlay you have the potential to lose the context where the modal is needed, or users who do something like opening several modals etc.

http://getbootstrap.com/javascript/#popovers

Answer 7

I made a snippet here that can satisfy your needs when I manually entered into textarea using event.key and event.keyCode while the modal is being displayed.

 var $text = $('#textarea'); var backEdit = false; var $modal = $('#problemModal'); $("#showProblemLink").on("click", function() { $modal.modal('show'); }); $modal.on('shown.bs.modal', function() { backEdit = true; }) $modal.on('hidden.bs.modal', function() { backEdit = false; }) $(document).keypress(function(e) { if (backEdit) { var keyCode = e.keyCode; formatTextArea(keyCode); } }); function formatTextArea(keycode) { var val = $text.val(); var caretPos = $text[0].selectionStart; var textAreaTxt = $text.val(); $text.val(textAreaTxt.substring(0, caretPos) + String.fromCharCode(keycode) + textAreaTxt.substring(caretPos)); } 

 <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> <div class="container"> <form> <div class="form-group"> <label>Answer (<a id="showProblemLink" href="#">view problem</a>)</label> <textarea class="form-control" rows="7" id="textarea"></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> 

Answer 8

The modal value for determining "modal" aka is always in the upper dialog box , so all you need to do is to make it modeless, use your own html layout, this can be done using jQuery:

 $('#problemModal').removeClass('modal') .hide() .css('position','absolute') .css('top',0) .css('left',(screen.width - $('#problemModal').width())/2); $("#showProblemLink").on("click", function() { $('#problemModal').show(); }); $('#modal-close-btn').click(function(){ $('#problemModal').hide(); }); 

Below is Bootply's work as a demo.

Answer 9

You can disable the modal "focus of power" (for example: prevent the publication of an external text field) by deleting the document event "focusin.modal":

 $("#problemModal").on("shown.bs.modal", function() { $(document).off("focusin.modal"); }); 

If you want the cursor to focus on the text field after the modal has been opened, just add $("textarea").focus();

 $("#problemModal").on("shown.bs.modal", function() { $(document).off("focusin.modal"); $("textarea").focus(); });