Нажатие клавиши эвакуации в открытом диалоговом окне Select2 не должно закрываться Bootstrap modal

Используя Twitter Bootstrap 3, выпадающий список Select2 встроен в модальный.
Теперь при нажатии клавиши эвакуации на таком открыт Элемент Select2 и выпадающий список и модальный диалог сразу же закрывается.Нажатие клавиши эвакуации в открытом диалоговом окне Select2 не должно закрываться Bootstrap modal

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

Я подготовил jsfiddle, чтобы легко воспроизвести поведение http://jsfiddle.net/a82RX/.
(я использовал ту же модальность, как в документации начальной загрузки с очень простым ВЫБ.2 выпадающего списком.)

Я уже пытался вмешаться и отменить закрытие модального путем прослушивания на

select2-close

события, без успеха.

источник

2014-01-07 mkurz

Использование

$('#myModal').modal({keyboard:false});

См http://getbootstrap.com/javascript/#modals-usage

Полное решение:

HTML

<button class="btn btn-primary btn-lg" id="modalLaunch">Launch demo modal</button>

Сценарий:

$(function() { 
    $("#e1").select2(); 
    $("#modalLaunch").click(function() { 
     $('#myModal').modal({ 
      show:true, 
      keyboard:false, 
      backdrop:'static' 
     }); 
    }); 
});

источник

2014-01-08 06:23:34 Ravimallya

Спасибо за ваш ответ. Но это было не то, что я искал. keyboard: false полностью отключает функциональность ключа esc, но я просто хочу, чтобы она была отключена после нажатия esc в раскрывающемся списке open2, поэтому только раскрывающееся меню закрывается. Однако при закрытии ключа esc прекращается закрытие модальности, и выпадающее окно закрывается. – mkurz

http://jsfiddle.net/ravimallya/a82RX/14/ Это то, чего вы хотели достичь? здесь я использовал '$ (" # e1 "). on (" select2-close ", function() { $ ('# myModal'). modal ('hide'); });' чтобы скрыть модальность после выбор любой опции из выбранного элемента. Вы можете комбинировать [события] (http://ivaynberg.github.io/select2/select2-latest.html#events) select2 с загрузочным модальным javascript для получения. – Ravimallya

Нет, это не то, чего я хочу достичь. Возможно, я не объяснил это достаточно ясно (я не являюсь родным по-английски). То, что я хочу достичь, выглядит как нечто противоположное: «Когда раскрывающийся список открыт и нажимает esc, ТОЛЬКО выпадающий список должен быть закрыт, но модальный должен оставаться открытым». В любом случае, спасибо за ваши усилия. – mkurz

Я тоже столкнулся с такой ситуацией, и я нашел решение этой проблемы. Это сочетание разных идей.

1) При показе модального установите клавиатуру на значение false. Код - именно то, что предоставил @ravimallya.

2) Прослушать событие «esc» keyup. (Я думаю, вы можете также слушать KeyDown/нажатие клавиши события, но я пошел с KeyUp)

var ESCAPE_KEY = 27; 
$('#myModal').on('keyup', function (event) { 
    if (event.which === ESCAPE_KEY) { 
     $('#myModal').modal('hide'); 
    } 
});

3) [Bonus] Я также осуществил двойной побег, чтобы закрыть модальную функциональность, которая не была настолько очевидна, поэтому решил поделиться это со всеми. В основном, когда фокус находится на select2, и раскрывающийся список открыт, когда вы нажимаете «Esc», выпадающее меню select2 закрывается. Однако, если вы снова нажмете «Esc», ничего не произойдет. Хотя поведение второго «Esc» верное, я бы предпочел закрыть модальный. Так вот моя реализация коды его:

$('#mySelect').select2(); 
var mySelectContainer = $(mySelect).data('select2').container; 
$(mySelectContainer).on('keyup', function (event) { 
    if (event.which === KeyCodes.Escape) { 
     $('#myModal').modal('hide'); 
    } 
});

Причина прослушивание ВЫБ.2-близко событие не работает, потому что KeyUp модального (или что-то вроде этого) обработчик запускает сразу после «ЭК» произошло ,

К тому же, если вам посчастливилось подписаться на много событий в режиме keyup/keydown/keypress, вы можете проверить JQuery HotKeys.И если вы уже используете его, то вышеуказанное решение выглядит следующим образом:

источник

2015-05-26 06:48:58

Нажатие клавиши эвакуации в открытом диалоговом окне Select2 не должно закрываться Bootstrap modal

ответ

Смежные вопросы