Всплывающая таблица

Статус
В этой теме нельзя размещать новые ответы.
J

Juvefan

Создатель
Регистрация
16 Сен 2006
Сообщения
10
Реакции
2
Здравствуйте.

Меня интересует, как возможно ли сделать всплывающую таблицу при наведении на какое-либо слово. В таблице планируются ссылки и текст.

Заранее благодарен.
 
Juvefan написал(а):
Здравствуйте.

Меня интересует, как возможно ли сделать всплывающую таблицу при наведении на какое-либо слово. В таблице планируются ссылки и текст.

Заранее благодарен.
Нажмите для раскрытия...

с помощью JS , слова, при наведении на которые будет всплывать таблица, должны быть размечены, этим тегам добавляется слушатель события mouseon при возникновении события, определяем если нужно контекст (источник события - слово), создаем DIV и с помощью свойства innerHTML вставляем туда нашу информацию(можно подгрузить внешний файл с табличкой), обновляя перменные в табличке в зависимости от контекста....

как то так...

еще проще с jQuery
 
А с jquery может кто-нибудь расписать?
 
Не надо никаких jquery. Скрипт элементарно прост:

Код: 
<div id="hiddenBlock" class="block" style="position:fixed;background-color:#FFF; display:none; border:1px solid #000;padding:10px;">
<table width="100%" height="150" align="center" cellspacing="1" cellpadding="1" border="0">
  <tr>
    <td align="center">   	
        <input name="txt_for_replace" id="txt_for_replace" type="text" value="" style="width:99%" />
        <input name="comments_from" id="comments_from" type="hidden" value="" /> 
     </td>
  </tr>
  <tr>
    <td><strong>комментарии </strong></td>
  </tr>
  <tr>
    <td align="center">    
        <input name="comment" type="text" value="" style="width:99%" />
    </td>
  </tr>
  <tr>
    <td align="right" valign="bottom">    
        текст
    </td>
  </tr>  
 </table>
</div>

в java script прописываете для блока При наведении на который должна всплывать таблица.
function popUp() { /*функция, по которой блок всплывает*/
document.all["hiddenBlock"].style.display='block';
}
Нажмите для раскрытия...
css для блока
.block {
position: absolute;
overflow: auto;
width: 400px;
height: 200px;
left: 50%;
top: 50%;
margin-left: -200px;
margin-top: -100px;
background: #C0DCC0;
}
Нажмите для раскрытия...

а вот получать данные для всплывающей таблицы - нужен Ajax (jQuery), либо формирование этой таблицы средствами php до момента отдачи страницы пользователю.
 
Вот мой вариант попапа только CSS ! но попап я так и не смог привязать к тексту от которого выполняется действие - попап ! Я привязал всплывающее сообщение к верхнему правому углу !
Код: 
<head>
<style>
body {font-family:verdana; font-size:16px;}
#popup {display:inline;}
#popup:hover #msg {display:inline;}
#msg {display:none; position:fixed; width:200px; text-align:justify; right:10px; top:10px;  font-family:arial; font-size:10px; background:#dadada; padding:10px;}
</style>
</head>
<body>
Привет, это всякий <div id="popup"><b>текст</b><div id="msg">А это попап при наведени на текст</div></div> ! Это калечный <div id="popup"><b>попап</b><div id="msg">Ну может прям очень калечный попап</div></div> но всё же попап )<br>
<div id="popup"><b>test</b><div id="msg">Положение элемента устанавливается относительно его исходного места. Добавление атрибутов left, top, right и bottom изменяет позицию элемента и сдвигает его в ту или иную сторону от первоначального расположения, в зависимости от применяемого параметра. </div></div>
</body>

Добавлено через 10 минут
А вообще не мучайся !
вот тебе готовые и отличные решения :

Coda Bubble:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


и мои любимый prototip:
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.
 
попробуй еще ThickBox. Выводит окно с любым содержмим, сам делал вывод таблицы этой штукой.
 
Для просмотра скрытого содержимого вы должны войти или зарегистрироваться.


вот не плохая подборка по теме, сам некоторыми пользовался...
 
Останавлюсь, наверное, на варианте Для просмотра ссылки Войди или Зарегистрируйся.
Всем еще раз спасибо. Думаю, кому-нибудь еще понадобится данная тема, ибо расписано много полезных способов.

А относительно способа Для просмотра ссылки Войди или Зарегистрируйся, то для того что попап всплывал под текстом нужно заменить эти две строчки:
#popup:hover #msg {display:inline;}
#msg {display:none; position:fixed; width:200px; text-align:justify; right:10px; top:10px; font-family:arial; font-size:10px; background:#dadada; padding:10px;}
Нажмите для раскрытия...
на эти:
#popup:hover #msg {display:block;}
#msg {margin-left:20px;display:none; position:absolute; width:200px; text-align:justify; font-family:arial; font-size:10px; background:#dadada; padding:10px;}
Нажмите для раскрытия...
 
он всплывает под строчкой (
но не возле ключевого слова !
 
Статус
В этой теме нельзя размещать новые ответы.
Назад
Сверху