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

Question

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

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

Любая идея?

Мой код:

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

Answer 1

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

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

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

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

Это, как говорится, есть способ обойти это. Bootstrap sets up an event listener, чтобы украсть фокус со всего остального, и это то, что мешает вам редактировать ввод текста. Другие кнопки работают, потому что они не требуют фокуса, только событие click.

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

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

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

Answer 2

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

Answer 3

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

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

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

Answer 4

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

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

Answer 5

следующим образом можно решить эту проблему для Bootstrap v2.3.2, Kendo UI Сетка версии 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'); 
    }); 

Answer 6

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

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

.modal-backdrop { 
    position: static; 
} 

Answer 7

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

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

jsfiddle

Answer 8

Пожалуйста, удалите:

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

Answer 9

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

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