Bootstrap Modal - show не удаляет атрибут hide

Я создаю модуль Bootstrap 2.3.1 следующим образом:

myModal = $('<div/>', {
   'class': 'modal hide',
   'id': id + '-addModal',
   'tabindex': -1, // needed for escape to work...
   'role': 'dialog',
   'data-backdrop': 'static'
   }).append(content);


// insert Modal into DOM...
$(jqElement).after(myModal);

// focus on first input when it pops up...
myModal.on('shown', function () {
    myModal.find('select:first').focus();
   });

//в ответ на нажатие кнопки... myModal.modal( 'шоу');

В редких случаях на заднем плане отображается, но модальный не отображается. Кто-нибудь сталкивался с подобной проблемой и обходным решением? Я знаю, что IE8 не любит анимированные модалы (использование класса fade), и это не похоже на ту же проблему, что и мы не используем fade. Проблема появляется в FF, Chrome и IE, но, как и испанская инквизиция, никогда, когда я этого ожидаю.

Ошибка оказывается в рамках выполнения modal('show'). Кажется, что модаль существует, но не скрыт. Я считаю, что это должно быть достигнуто добавлением класса in в модальное. Однако события show и shown происходят. От взгляда на код начальной загрузки факт, что показанное событие происходит, означает, что событие не предотвращено по умолчанию.

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

Также обратите внимание, что я не могу обновить Bootstrap 3. Я несу ответственность за внесение небольших изменений в уже выпущенный продукт, а изменение базовых библиотек - это не стартер.

Ответы

Ответ 1

Я нашел следующие проблемы:

a) "показанное" действие модальных проверок для атрибута display:block и заставляет его устанавливать.

b) кнопка закрытия (которая необходима для проверки) была установлена на событие click - изменение этого на делегированное событие заставило его работать надежно

c) обе кнопки отмены были сопоставлены с действием модального отклонения.

myModal.on('show', function (event) {
    self._debug("show modal");

    // show add form - should be a modal
    myModal.find('form')[0].reset();
    myModal.find('.alerts').empty();
    self._debug('show end');
    return true;
});

myModal.on('shown', function () {
    var $el = $('#myModal');
    if ($el.css('display') == 'none') {
       self._debug(" WARNING! modal css error");
    }
    self._debug("fix for bootstrap error");
    $el.css('display', 'block');
    myModal.find('select:first').focus();
    self._debug('Shown modal');
    return true;
 });

myModal.on('hide', function () {
    self._debug('Hide modal');
    return true;
});

myModal.on('hidden', function () {
  var $el = $('#myModal');
  $el.css('display', 'none');
  self._debug('Hidden modal');
  return true;
        });

Ответ 2

Я изменил код и добавил его в тело вместо неизвестного jqElement, указанного в вашем примере. Кроме того, я добавил несколько примеров содержимого места. См. Следующий JS Fiddle для рабочего примера http://jsfiddle.net/kYVtf/5/

var id = 'test',
content = '<div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel">Modal header</h3></div><div class="modal-body"><p><select><option>TEST</option></select></p></div>  <div class="modal-footer">    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>    </div>';

var myModal = $('<div/>', {
    'class': 'modal hide fade',
    'id': id + '-addModal',
    'tabindex': -1, // needed for escape to work...
    'role': 'dialog',
    'data-backdrop': 'static'
}).html(content);


// insert Modal into DOM...
$('body').append(myModal);

// focus on first input when it pops up...
myModal.on('shown', function () {
    myModal.find('select:first').focus();
});

Ответ 3

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

$('.modal').modal({
    backdrop: 'static',
    keyboard: false
});

Я исправил это, добавив show: false к модальным параметрам и убедившись, что в <div class="modal fade"

не было класса hide