2016-12-20 21 views
0

Я пытаюсь решить проблему, с которой я столкнулся с созданием интерфейса всплывающей подсказки на веб-сайте, который я разрабатываю. Я построил подсказки с помощью HTML, CSS и JavaScript. Скрипт довольно прост, как вы можете видеть в скрипке внизу, и основывается на поведении переключателя, когда триггерный элемент открывает всплывающую всплывающую подсказку.Проблемы с отображением подсказки

jsFiddle

сейчас! Моя проблема в том, что я не могу понять, как разместить триггер на вершине всего, чтобы они не были скрыты всплывающими окнами! Позволь мне объяснить. Поскольку всплывающие окна, даже когда они выключены, иногда покрывают триггерные элементы, которые они (триггеры) просто не могут быть интерактивными. как будто они скрыты за невидимыми всплывающими окнами. Вот ссылка, как сейчас работает онлайн.

http://271116.lucamule.com/studio-1

Я надеюсь, что вы можете увидеть проблему! Кто-нибудь знает, как это решить?

+2

Добро пожаловать на переполнение стека! Вопросы, требующие отладки, должны содержать кратчайший код, необходимый для его воспроизведения ** в самом вопросе **. NB - ** Пожалуйста, не злоупотребляйте блоками кода, чтобы обойти это требование **. –

+0

Вам нужно поместить всплывающие подсказки, когда они не активны. Что-то вроде 'left: -10000px;' в вашем css. Теперь, когда активен, вы можете добавить класс, который соответствующим образом изменяет значение 'left'. –

ответ

0

Вы изменили .pop-ups на «block», как только он инициализируется. $("div.pop-up").css({'display':'block','opacity':'0'})

Если вы хотите, чтобы показать/скрыть, я бы рекомендовал использовать .fadeIn/.fadeOut: http://api.jquery.com/fadein/

+0

Эй, @ Питер! thx для ответа! Я пытаюсь понять, что происходит, и просто не могу. Можете ли вы дать мне подсказку, как разрешить сценарий? –

+0

В принципе, onclick вы можете применить метод .fadeToggle(). –

+0

$ (el) .on (click: function() {$ (elem) .fadeToggle()}); –

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