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

Тема в разделе "Веб-дизайн", создана пользователем Juvefan, 22 апр 2009.

Статус темы:
Закрыта.
Модераторы: zek24
  1. Juvefan

    Juvefan Создатель

    Регистр.:
    16 сен 2006
    Сообщения:
    10
    Симпатии:
    2
    Здравствуйте.

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

    Заранее благодарен.
     
  2. alexzander69

    alexzander69 Постоялец

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

    как то так...

    еще проще с jQuery
     
    Juvefan нравится это.
  3. Juvefan

    Juvefan Создатель

    Регистр.:
    16 сен 2006
    Сообщения:
    10
    Симпатии:
    2
    А с jquery может кто-нибудь расписать?
     
  4. dandandan

    dandandan

    Регистр.:
    7 авг 2008
    Сообщения:
    975
    Симпатии:
    255
    Не надо никаких 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 прописываете для блока При наведении на который должна всплывать таблица.
    css для блока
    а вот получать данные для всплывающей таблицы - нужен Ajax (jQuery), либо формирование этой таблицы средствами php до момента отдачи страницы пользователю.
     
    Juvefan нравится это.
  5. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    Вот мой вариант попапа только 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:

    http://jqueryfordesigners.com/demo/coda-bubble.html


    и мои любимый prototip:
    http://www.nickstakenburg.com/projects/prototip2
     
    Juvefan нравится это.
  6. ne0zx

    ne0zx

    Регистр.:
    1 ноя 2008
    Сообщения:
    212
    Симпатии:
    74
    попробуй еще ThickBox. Выводит окно с любым содержмим, сам делал вывод таблицы этой штукой.
     
  7. ApeQ

    ApeQ Постоялец

    Регистр.:
    25 мар 2009
    Сообщения:
    78
    Симпатии:
    5
    Еще симпотичный вариант http://highslide.com/
     
  8. funman

    funman Постоялец

    Регистр.:
    28 дек 2007
    Сообщения:
    146
    Симпатии:
    25
    http://www.w3school.ru/blog/web-development/43-tooltips-scripts-ajax-javascript-css-dhtml.html

    вот не плохая подборка по теме, сам некоторыми пользовался...
     
  9. Juvefan

    Juvefan Создатель

    Регистр.:
    16 сен 2006
    Сообщения:
    10
    Симпатии:
    2
    Останавлюсь, наверное, на варианте dralex.
    Всем еще раз спасибо. Думаю, кому-нибудь еще понадобится данная тема, ибо расписано много полезных способов.

    А относительно способа dralex, то для того что попап всплывал под текстом нужно заменить эти две строчки:
    на эти:
     
  10. dralex

    dralex Постоялец

    Регистр.:
    13 июн 2008
    Сообщения:
    77
    Симпатии:
    18
    он всплывает под строчкой (
    но не возле ключевого слова !
     
Статус темы:
Закрыта.