Как отлаживать всплывающее окно?

На этой скрипке http://jsfiddle.net/mjmitche/qVdEy/6/ вы можете убедитесь, что выравнивание текста внутри всплывающего окна идеальное, однако, когда я помещаю точно такой же css / js / html на свой сайт, текст оказывается больше, чем контейнер!

введите описание изображения здесь

Я пытаюсь выяснить, что происходит, с помощью firebug, но мне нужно переместить курсор из всплывающего окна, чтобы использовать firebug, а затем firebug исчезает. Я не могу понять, какие настройки в моем коде меняют представление. Всплывающие окна создаются с использованием Twitter Bootstrap.js (вы можете увидеть ресурсы в скрипте)


html css twitter-bootstrap
person Leahcim    schedule 27.12.2011    source источник
comment
Вы, несомненно, смешиваете свой собственный CSS с Bootstrap. Ваш собственный CSS затем нарушает загрузку, это действительно так просто.   -  person Tom van der Woerdt    schedule 27.12.2011
comment
Какую версию firefox вы используете, у меня не возникает такой же проблемы с firefox или chrome   -  person Gautam    schedule 27.12.2011
comment
Я думаю, вы неправильно поняли вопрос. Всплывающее окно на jsfiddle идеально (в моем браузере и в вашем), но на моем локальном сайте (который вижу только я) оно сломано, независимо от того, какой браузер. Вы не видите код на моем локальном сайте.   -  person Leahcim    schedule 27.12.2011
comment
изображение в OP взято с моего локального хоста. С кодом на скрипке проблем нет.   -  person Leahcim    schedule 27.12.2011
comment
Единственное логичное решение - это то, что предложил @TomvanderWoerdt.   -  person Gautam    schedule 27.12.2011
comment
Вот небольшой совет, который я придумал. Он копирует всплывающий HTML-код в тело, поэтому он всегда отображается.   -  person Bojangles    schedule 27.12.2011
comment
Я знаю, что моя реализация, очевидно, создает проблему - это просто - но мой вопрос спрашивал, как отлаживать всплывающее окно, потому что каждый раз, когда я пытаюсь прочитать css с помощью firebug, всплывающее окно исчезает. Я не могу понять источник проблемы   -  person Leahcim    schedule 27.12.2011
comment
@Michael: stackoverflow.com/ вопросы / 1080803 /   -  person naveen    schedule 27.12.2011
comment
Вы смотрели мой JSFiddle в моем комментарии? Он клонирует всплывающий HTML-код в тело, чтобы он не исчезал, поэтому его можно проверить с помощью Firebug как обычно.   -  person Bojangles    schedule 27.12.2011
comment
@JamWaffles, спасибо, я все еще пытался понять твою. Спасибо за объяснение. Аккуратный.   -  person Leahcim    schedule 27.12.2011

Ответы (4)


arrow_upward
2
arrow_downward

Посмотрев на CSS popover, кажется, что явно не определен размер шрифта: http://twitter.github.com/bootstrap/1.4.0/bootstrap.min.css (просто найдите" popover "и просмотрите CSS)

Возможно, попробуйте добавить следующий CSS и настроить его оттуда:

.popover, .popover h3.title, .popover .content { font-size: 14px; }

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

person Andrew Odri    schedule 27.12.2011
comment
Это отвечает на основной вопрос. К вашему сведению, ответ на начальный вопрос см. Ниже в ответе Джона. - person retrovertigo; 13.11.2017

arrow_upward
32
arrow_downward

Никто толком не ответил на вопрос "Как отлаживать всплывающее окно" ::: Просто установите всплывающее окно так, чтобы оно открывалось при загрузке >> $('#element').popover('show')

person John Montgomery    schedule 25.06.2012
comment
Это должен быть принятый ответ при условии, что вопрос касается отладки. - person Tariqulazam; 11.02.2016
comment
Как раз то, что я искал, вы также можете добавить эту команду в панель часов. - person guilleva; 08.04.2016
comment
Кроме того, например, в Firefox DevTools вы можете выбрать запускающий элемент в Inspector, щелкнуть правой кнопкой мыши Use in Console и сделать что-то вроде $(temp0).popover('show') - person retrovertigo; 13.11.2017

arrow_upward
4
arrow_downward

То, что я делаю, довольно странно и, похоже, работает только в Chrome, а не в Firebug. Шаги следующие:

  1. Откройте инспектор Chrome в новом окне
  2. Убедитесь, что часть инспектора находится над кнопкой, которую вы пытаетесь активировать (которая находится в фоновом окне
  3. Активируйте окно браузера и наведите указатель мыши на кнопку (это активирует всплывающее окно), теперь нажмите alt + tab (cmd + `в OSX), чтобы переключиться в окно инспектора.
  4. Это не вызовет событие mouseOut и не оставит ваше всплывающее окно прикрепленным к узлу тела DOM! Поскольку вы уже находитесь в инспекторе, вы можете перейти к нему и увидеть проблему css.
person Ryan953    schedule 27.12.2011
comment
это вроде сработало для меня, но как только я перемещаю мышь после шага 3, как-то на самом деле запускается событие mouse-out, хотя оно больше не является активным окном :( но оно появляется в консоли до этого, но я могу '' Я не вижу элемент, потому что я не могу прокрутить его, чтобы увидеть его в инспекторе Chrome, прежде чем он исчезнет - person FireDragon; 23.03.2013

arrow_upward
0
arrow_downward

Для этого я создал свой новый инструмент визуализации HTML-боксов. Проверить это!

Визуализатор HTML-боксов - GitHub

person Gabriel McAdams    schedule 24.10.2016