Twitter Текстовое поле ввода текстовых блоков Bootstrap

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

Другие типы ввода (флажок и кнопка в примере) работают хорошо...

Любая идея?

Мой код:

<div class="container">
<!-- Button to trigger modal -->
  <form>
      <label>Input</label>
      <input type="text" placeholder="Type something…">
      <label class="checkbox">
        <input type="checkbox">Checkbox
      </label>
      <button type="submit" class="btn">Submit</button>
  </form>

  <!-- Button to trigger modal -->
  <a href="#myModal" role="button" class="btn" data-toggle="modal">Open Help...</a>

  <!-- Modal -->
  <div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-header">
      <h3 id="myModalLabel">Modal header</h3>
    </div>
    <div class="modal-body">
      <p>One fine body…</p>
    </div>
    <div class="modal-footer">
      <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    </div>
  </div>
</div>

Простой Javascript, чтобы сделать всплывающее окно перетаскиваемым:

$('#myModal').draggable();

Все это на JSFiddle...

http://jsfiddle.net/Jxdd8/3/

Ответы

Ответ 1

Похоже, что модальное решение не является правильным решением вашей проблемы.

Модальный диалог по определению не должен позволять пользователю взаимодействовать с чем-либо ниже.

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

- http://en.wikipedia.org/wiki/Modal_window

Как говорится, есть способ обойти это. Bootstrap устанавливает прослушиватель событий, чтобы украсть фокус из всего остального и что мешает вам отредактировать ввод текста. Другие кнопки работают, потому что им не требуется фокус, только событие click.

Вы можете прослушать "показанное" событие, которое запускает модальный триггер, и отключить его прослушиватель фокуса.

$('#myModal').on('shown', function() {
    $(document).off('focusin.modal');
});

И просто для удовольствия: http://jsfiddle.net/Jxdd8/4/

Ответ 2

помните, что ответ Эрика Фризе больше не действителен, если вы используете Twitter Bootstrap 3 - имя события изменилось, поэтому вместо этого используйте следующий код:

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

Ответ 3

Удалите:

tabindex="-1"

от

<div id="myModal" class="modal hide" data-backdrop="" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Используйте это вместо:

<div id="myModal" class="modal hide" data-backdrop="" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

Ответ 4

* ПОСТАНОВИЛИ

В случае, если кто-то все еще застрял в этой проблеме, решение выглядит следующим образом:

После того, как div class <div class="modal fade" insert: style="display:none;" Это остановит модальное блокирование полей и устранит проблему.

Ответ 5

Следующим образом можно исправить эту проблему для Bootstrap v2.3.2, Kendo UI Grid версии 2013.3.1119.340 в IE11.

точка удаляет класс "in" из модального класса. Не нужно использовать "style =" display: none; ", так как это вызывает странный интерфейс Kendo Grid.

html коды до исправления:

  <div class="modal hide fade in" id="YourWindow" role="dialog">

html коды после исправления:

  <div class="modal hide fade" id="YourWindow" role="dialog">
       <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>            
       </div>
       <div class="modal-body" >
          <div id="YourWindowBody">
          </div>
       </div>
       <div class="modal-footer">
          <button type="button" data-dismiss="modal">Close</button>      
       </div>
  </div>

то же самое время, добавьте следующую строку javascript:

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

Ответ 6

как сказал Эрик Фриз: "Модальный диалог по определению не должен позволять пользователю взаимодействовать с чем-либо ниже". Я предполагаю, что то, что вы ищете, можно найти в Popover, у которого есть возможность разрешить html-контент http://twitter.github.com/bootstrap/javascript.html#popovers

Ответ 7

Для меня проблема заключалась в том, что я использовал jquery 3.2.1, поэтому я меняю его на 2.1.3, который использовался в предыдущем приложении, которое мы разработали, и все работает нормально. Может быть что-то с версиями совместимости jquery и bootstrap.

Надеюсь, что это поможет

Ответ 8

Использование Bootstrap версии 3.3.2 и ни одно из вышеперечисленных решений не работает.

Добавление следующего CSS сделало трюк

.modal-backdrop {
    position: static; 
}

Ответ 9

используйте этот код конца всего кода javascript:

$(document).on('focusin', function(e) {
    if ($(event.target).closest(".mce-window").length) {
        e.stopImmediatePropagation();
    }
});

jsfiddle