Bootstrap 3 - модальный, исчезающий под фоном при использовании фиксированной боковой панели

Я определил эту проблему как событие из-за появления всплывающего окна в другом div с position:fixed, которого я не могу избежать из-за фиксированной функции боковой панели, которую я использую, которая охватывает весь контент в теле и заключает его в отдельный дела. Чтобы компенсировать эту проблему, я думаю об изменении положения модального "на лету" с использованием следующего кода -

$('.modal').on('show.bs.modal', function (e) {
        e.preventDefault();
        $(this).appendTo("body").modal('show');
     });

Выполнение этого просто дает мне <error> jquery.js:1 в консоли. Это исправление отлично работает в бутстрапе 2.

Изменить - попробовал следующий

$('.modal').on('show.bs.modal', function (e) {
        e.preventDefault();
        console.info(e);
        $(e.target).appendTo('body').modal('show');
     });

Но это, очевидно, испортит его из-за того, что он застревает в бесконечном цикле. Угадайте, что это будет хорошо, если я нахожу эффективный способ одновременного обнаружения нескольких событий шоу на одном и том же модальном уровне.

Ответ 1

Итак, после более чем часа кодирования и оценки я подчеркиваю все возможные решения -
1. Возьмите свой модальный из родительского контейнера, который должен иметь свойство css любой позиции: фиксированный или относительный.
2. Удалите вышеупомянутые два свойства самого модального элемента.
3. Для таких случаев, как my, где модаль автоматически добавляется в раздел div для ситуаций, требующих отзывчивости, я закодировал следующий бит для бутстрапа 3, который должен работать в общем случае на всех модалах без необходимости индивидуального кода javascript для каждого.

    var checkeventcount = 1,prevTarget;
    $('.modal').on('show.bs.modal', function (e) {
        if(typeof prevTarget == 'undefined' || (checkeventcount==1 && e.target!=prevTarget))
        {  
          prevTarget = e.target;
          checkeventcount++;
          e.preventDefault();
          $(e.target).appendTo('body').modal('show');
        }
        else if(e.target==prevTarget && checkeventcount==2)
        {
          checkeventcount--;
        }
     });

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

Ответ 2

Я был в той же ситуации, и я придумал отличный трюк CSS:

.modal {
  background: rgba(255, 255, 255, 0.8); /* The color depends on your template */
}
.modal-backdrop {
  display: none;
}

В принципе, я уверен, что исходный фон скрыт, и я добавляю прозрачный белый фон в модальный контейнер. Оказывается, контейнер занимает всю высоту тела, чтобы эффективно центрировать фактический модальный.

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

Ответ 3

Лучшее решение: Использование firebug для просмотра z-индекса боковой панели, например: 1000 мы вставляем файл css в этот код:

.modal-backdrop
{
 z-index: 1100;
}
.modal
{
 z-index: 1200;
}