Я работаю над сайтом начальной загрузки, и после обновления до версии 2.2 с версии 2.0 все заработало, кроме всплывающего окна.
Всплывающие окна по-прежнему отображаются нормально, но они не отображаются поверх всех других элементов.
<div> // this sits on top of the popover. this did not happen before cleaning up scripts.
<div> //popover shows on top of this
<div> //popover shows on top of this
//link here with popover in it.
</div>
</div>
</div>
Кто-нибудь знает, почему изменилось поведение всплывающего окна или как я могу это исправить? Спасибо.
javascript
html
twitter-bootstrap
popover
рукав моря
источник
источник
Это работает для меня
источник
У меня была ситуация, похожая на эту, с использованием библиотеки DataTables JQuery с включенной прокруткой.
Оказалось, что это не имеет ничего общего с Z-индексами, а связано с одним из включающих div, для которого свойство переполнения CSS установлено как скрытое.
Я исправил это, добавив событие к моему элементу, запускающее всплывающее окно, которое также изменило свойство переполнения ответственного div на visible.
источник
Наиболее вероятная причина в том, что контент, отображаемый во всплывающем окне, имеет более высокое значение
z-index
. Без точного кода / стиля я могу предложить два варианта:Вам следует попробовать определить точные элементы с помощью веб-инспектора (обычно F12 в вашем любимом браузере) и проверить их актуальность
z-index
.Если вы найдете это значение, вы можете установить его ниже, чем всплывающее окно, которое
z-index: 1010;
по умолчаниюИли другой подход, не такой хороший, - это увеличить
z-index
всплывающее окно. Вы можете сделать это либо с@zindexPopover
помощью файлов Less, либо напрямую, переопределивЕсли вы не можете найти решение, попробуйте воспроизвести ошибку в чем-то вроде этого jsfiddle - вы, вероятно, решите проблему, пытаясь получить ошибку.
источник
У меня была аналогичная проблема с двумя фиксированными элементами - хотя иерархия z-индекса была правильной, всплывающая подсказка начальной загрузки была скрыта за одним элементом с более низким z-индексом.
Добавление
data-container="body"
устранило проблему и теперь работает должным образом.источник
Если data-container = "body" не работает, попробуйте два других свойства:
z-index должен быть максимальным пределом.
источник
Вышеуказанные ответы были полезны, поскольку значение параметра в контейнере данных выполнило свою работу, но если я установил data-container = "body", тогда он не выровнялся должным образом в моем случае. Итак, я указал класс родительского блока popover, и он работал нормально.
HTML
Данные-контейнер = "testDiv"
JS
$ ("# testPop"). popover ({контейнер: '.testDiv'})
источник
Лучшее решение, если вы используете angular uib-bootsrap, - использовать внедрение зависимостей для $ uibTooltipProvider, вы можете изменить способ поведения всплывающих подсказок и всплывающих окон по умолчанию для всех всплывающих подсказок.
$ uibTooltipProvider С помощью $ uibTooltipProvider вы можете изменить поведение всплывающих подсказок и всплывающих подсказок по умолчанию; указанные выше атрибуты всегда имеют приоритет. Доступны следующие методы:
setTriggers (obj) (Пример: {'openTrigger': 'closeTrigger'}) - Расширяет сопоставления триггеров по умолчанию, упомянутые выше, собственными сопоставлениями.
options (obj) - предоставляет набор значений по умолчанию для определенных атрибутов всплывающих подсказок и всплывающих окон. В настоящее время поддерживает те, которые имеют значок C.
источник
Много лет спустя, но, как и я, другие могут искать это. С учетом всех обновлений, все это можно решить с помощью правильных настроек инициализации в JavaScript.
Эти настройки решили все возможные проблемы. У меня всплывающие подсказки мерцали, отображались только для половины элементов на странице, постоянно прыгали сверху налево, всякие странности. Но с этими настройками все решено. Надеюсь, это поможет всем, кто ищет.
источник
Просто используя
может быть недостаточно при отображении всплывающего окна поверх модального окна BootstrapDialog, которое также использует тело в качестве контейнера и имеет более высокий z-индекс.
Я пришел с этим исправлением, которое использует внутреннюю часть Bootstrap3 (может не работать с 2.x / 4.x), но большинство современных установок Bootstrap - это 3.x.
Таким образом, разные всплывающие окна могут иметь разный z-index, некоторые находятся в модальном режиме BootstrapDialog, а другие - поверх него.
источник
В моем случае мне пришлось использовать опцию шаблона popover и добавить свой собственный класс css в шаблон html:
Css:
источник
источник
источник
Если у вас есть стили родительского элемента, которые мешают отображению всплывающего окна, вам нужно указать собственный контейнер, чтобы HTML всплывающего окна отображался внутри этого элемента.
Например, скажем, что родительским элементом для всплывающего окна является тело, которое вы можете использовать.
Другой случай может быть, когда всплывающее окно помещается внутри какого-либо другого элемента, и вы хотите отображать всплывающее окно над этим элементом, тогда вам нужно указать этот элемент в контейнере данных. Пример: Предположим, у нас есть всплывающее окно внутри модального окна начальной загрузки с id как 'modal-two', тогда вам нужно установить 'data-container' в 'modal-two'.
источник
Это могло быть связано с главным списком z-index в переменных .less. В общем, убедитесь, что ваш файл variables.less является правильным и актуальным.
источник