Bootstrap - Редактирование TextArea Behind Modal

Question

У меня есть веб-страница, которая использует Bootstrap 3. На этой странице мне нужна текстовая область, на которую человек может вставить свой ответ. Ответ на проблему истории. Проблема истории появляется в модальном диалоге. Настройка можно увидеть в этом Bootply. Код выглядит следующим образом:

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

Моих пользователи хотят, чтобы быть в состоянии держать эту проблему истории открыть в модальном окне, когда они входят в свой ответ. Это позволит им проверить их ответ. Очевидным ответом является их повторное открытие диалога. Но, по-видимому, этого недостаточно. Мне действительно нужно оставить диалог открытым и позволить пользователю вводить данные в текстовую область за/под ним. Мне кажется странным. Но это то, что я должен делать.

Моя проблема в том, что когда я нажимаю на textarea, диалог исчезает. Я попробовал добавить data-backdrop="false". Хотя этот диалог оставался открытым, он не позволял мне редактировать textarea. Что мне не хватает?

Answer 1

На самом деле это очень просто получить именно то, что вы хотите.

То, что вы на самом деле ищете является Dialog и не модальный.

Здесь working example с использованием jQuery UI Dialog.

---

Пояснение:

• Модальное предназначен для блокирования взаимодействия пользователя с приложением.
• А dialog выглядит и действует аналогично, но разработан, чтобы позволить пользователю продолжать взаимодействовать со страницей (Вы можете установить его вручную, чтобы заблокировать все, если вы хотите)

Вот SO discussion об этом

---

Некоторые подробности о примере:

по умолчанию диалоговое окно можно перетаскивать заголовком. Я держал пример, похожий на ваш модальный, так что я взял заголовок с помощью:

dialogClass: 'dialog-modal' 

И

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

Чтобы сделать весь диалог Draggable я использовал:

draggable: false 

И

.parent().draggable(); 

Если вы действительно делаете wan t заголовок, вы можете удалить все эти части. Вот example with a header

Answer 2

Моя проблема в том, что когда я нажимаю на текстовое поле, диалог исчезает. I попытался добавить data-backdrop = "false".

Это потому, что вы на самом деле не нажимаете на текстовое поле, вы щелкали элементом перекрытия, который закрывал бы модальный щелчок.

Я не уверен, что удаление элемента наложения позволит вам вводить текст в текстовую область, но даже в этом случае я не думаю, что это хорошая идея (удаление наложения и возможность сделать что-то позади, пока модальная все еще продолжается).

Так что я предлагаю: Имейте кнопку на модальном при щелчке, она должна отображать другое текстовое поле. И когда вы вводите что-то на текстовое поле, оно обновляет содержимое внутри основной текстовой области.

Так вот новый модальный:

См работает example.

Answer 3

Некоторые решения я мог думать для этого было бы либо:

1. переместить ответ textarea в диалог, который имеет вопрос в ней.

2. или использовать popover вместо модального.

Stackoverflow фрагмент кода, который выглядит ужасно, потому что не хватает все самозагрузки укладки поэтому проверьте bootply ссылка:

$(".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 4

То, что вы пытаетесь достичь, это не так легко возможно.

• Скрытие модального фона - легко
• Moving всего модальный DIV - среднего
• Making текстовой области позади модальный принимать фокус - очень трудно

Я понимаю вы хотите сэкономить место на странице, поэтому я бы предложил самый чистый вариант и ближе всего к тому, чего вы пытаетесь достичь: Bootstrap Collapse

DEMO here

Answer 5

Потребовалось немного пустячный, как это странно, проблема, но вот решение, которое я придумал.

Я сделал текстовую область внутри модальный, скрытый от просмотра, и захватит любую набранную печать, пока модальная функция открыта. Когда пользователь закрывает модальный, фокус возвращается в реальную текстовую область.

HTML (слегка измененный):

<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's 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's 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(); 
}); 

См this bootply

Answer 6

Альтернативным решением было бы использовать P opover, а в фокусе события textarea у вас есть модальная функция.

Преимущество в этом заключается в том, что вы сохраняете возможность держать пользователей в фокусе, на каком текстовом поле принадлежит история, как при удалении оверлея у вас есть потенциал потерять контекст, где нужен модальный, или пользователи, которые делают такие вещи, как открытие нескольких модальности и т.д.

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

Answer 7

Я сделал фрагмент here, который может выполнить ваши потребности, где я должен вручную ввести в textarea с помощью event.key и event.keyCode в то время как модальный показано.

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

модальный является по определению «модальный» ака «всегда сверху диалога», поэтому все, что вам нужно сделать, это сделать его покадрово, используйте HTML-макет это может быть сделано с помощью 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(); 
}); 

Вот работает Bootply как демо.

Answer 9

Вы можете отключить модальный «сила фокуса» (например: предотвратить выпуск внешнего текстового поля) путем удаления события документа «focusin.modal»:

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

Если вы хотите сохранить фокус курсора на текстовое поле после модального был открыт только добавить $("textarea").focus();

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