Создание текстового всплывающего окна для нескольких элементов на страницеHtml

Программисты Html
Ответить
Anonymous
 Создание текстового всплывающего окна для нескольких элементов на странице

Сообщение Anonymous »

У меня не очень большой опыт работы с JavaScript и jQuery, и мне действительно нужна помощь, чтобы кое-что обдумать. Я пытаюсь отобразить информацию пользователю аналогично интерфейсу Metro UI в Windows 8.

По сути, у меня есть страница, заполненная плитками разных размеров (как в Metro/Modern UI) и небольшим количеством информации на каждой плитке, например датой публикации. Я хотел бы иметь возможность щелкнуть плитку и чтобы появилось всплывающее текстовое окно с информацией, относящейся к плитке, на которую нажали.

Я полагаю, что это была бы простая задача, если бы контент был статическим, но, поскольку я создаю плитки на основе RSS-канала Facebook, у меня возникают некоторые трудности даже с выяснением того, как я буду хранить и отображать основной текст плитки. Чтобы донести свою мысль, я сделал чрезвычайно простой образец коробки и того, что мне хотелось бы.

Код: Выделить всё



Date
Basic synopsis

This is the body text that I want hidden to start with, but visible in the pop-up.





Теперь у меня нет проблем с созданием плиток и заполнением их датой и любой другой информацией, но я понятия не имею, как сделать текст внутри элемента div body-text не видимым внутри плитки, а только при нажатии и просмотре во всплывающем окне.

Честно говоря, я даже не знаю, стоит ли мне вообще хранить текст внутри плитки, но это единственный способ, которым я могу придумать организацию своих данных. Если вы помните, у меня будет до 25 таких плиток, идущих по экрану, и мне нужно иметь доступ к каждой из них. Кроме того, причина, по которой я так думаю, в первую очередь заключается в том, что раньше я использовал jQuery UI Accordion, в котором отображаемый текст был скрыт, а затем отображался при нажатии.

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

Подробнее здесь: https://stackoverflow.com/questions/208 ... -on-a-page
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «Html»