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

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

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

Есть идеи ?

Мой код:

Open Help...

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

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

Все это на JSFiddle …

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

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

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

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

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

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

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

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

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

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

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

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

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

    После classа div

    Удалите:

     tabindex="-1" 

    из

      

    Вместо этого используйте это:

      

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

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

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

       

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

       

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

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

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

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

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

    jsfiddle

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

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

    После меня работали:

     $('#myModal').on("show.bs.modal", (ev) => { $('#myModal').find(".modal-content").on("mousedown", (e) => { if ($(e.target).is("input")) { //Fix for bootstrap modal being stealing focus from inputs like textbox e.stopImmediatePropagation(); } }); }); 

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

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

     .modal-backdrop { position: static; } 
    Давайте будем гением компьютера.