Помогите разобраться со всплывающими окнами

(Ответов: 3, Просмотров: 399)
  1. Студент Аватар для chater
    • Регистрация: 27.03.2012
    • Сообщений: 65
    • Репутация: 2
    Здравствуйте уважаемые форумчане. Суть проблемы - нужно чтобы при наведении на иконку соц.сети, всплывало окошко виджета этой соц сети. Это сделать получилось, но загвоздка в том, что при наведении на 1 картинку - окно всплывает на одном уровне, при наведении на вторую, третью - на другом уровне. (прилепил картинки, но там к сожалению курсор не принтанулся) Как сделать так, чтобы на одном уровне окошки всплывали?
    P.S.При смене позиций - проблема остается. То есть первое по очереди окошко всплывает неправильно, остальные так как и нужно.
    Нажмите на изображение для увеличения.  Название:	vkscreen.jpg  Просмотров:	8  Размер:	10.4 Кб  ID:	20768
    Нажмите на изображение для увеличения.  Название:	ok-screen.jpg  Просмотров:	5  Размер:	13.9 Кб  ID:	20767
    Нажмите на изображение для увеличения.  Название:	instagram-screen.jpg  Просмотров:	5  Размер:	13.2 Кб  ID:	20766
    Вот коды:

    style.css

    Код HTML:
        .overlay{
      display:none;
      position: absolute;
     
    }
    a:hover .overlay{
        display: block;
    }

    Код "виджета"

    Код HTML:
    <div align="center"> <a href="ссылка1"> <div class="overlay"><p><script type="text/javascript" src="//vk.com/js/api/openapi.js?121"></script> <!-- VK Widget --> <div id="vk_groups"></div> <script type="text/javascript">
    VK.Widgets.Group("vk_groups", {mode: 2, width: "300", height: "400"}, 99316603);
    </script></p></div><img alt="" src="http://сайт/wp-content/uploads/2016/02/vk.png" style="width: 30px; height: 30px;" /> </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="ссылка2"> <div class="overlay"><div id="ok_group_widget"></div> <script>
    !function (d, id, did, st) {
      var js = d.createElement("script");
      js.src = "https://connect.ok.ru/connect.js";
      js.onload = js.onreadystatechange = function () {
      if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
        if (!this.executed) {
          this.executed = true;
          setTimeout(function () {
            OK.CONNECT.insertGroupWidget(id,did,st);
          }, 0);
        }
      }}
      d.documentElement.appendChild(js);
    }(document,"ok_group_widget","52724865761467","{width:300,height:275}");
    </script></div><img alt="" src="http://сайт/wp-content/uploads/2016/03/ok-1.png" style="width: 17px; height: 30px;" /> </a>&nbsp; &nbsp; &nbsp; &nbsp; <a href="ссылка3"> <div class="overlay"><p><iframe src='/inwidget/index.php' scrolling='no' frameborder='no' style='border:none;width:260px;height:330px;overflow:hidden;'></iframe></p></div><img alt="" src="http://сайт/wp-content/uploads/2016/03/instagram-1.png" style="width: 30px; height: 30px;" /> </a></div>


    Я так понимаю нужно в позиционировании первого окошка прописать значения какие-то? Но не могу понять какие. top, bottom при позиции fixed только усугубляет ситуацию (при наведении на картинку - окошко всплывает, но картинки соц.сетей не видны становятся)
    Заранее благодарю за помощь
    Последний раз редактировалось chater; 13.03.2016 в 19:30.
    • 0
  2. Опытный Аватар для Vlad03
    • Регистрация: 21.05.2014
    • Сообщений: 401
    • Репутация: 33
    • Webmoney BL: ?
    Было бы проще, если бы ссылку дали на это дело, так как по картинкам разобраться сложно. Можете в личку.
    • 0
  3. Гуру Аватар для Septik
    • Регистрация: 03.04.2010
    • Сообщений: 790
    • Репутация: 168
    • Webmoney BL: ?
    А если попробовать для первого элемента отступ добавить? .overlay:first-child { margin-top: Npx; } Только класс родителя еще спереди укажите.
    • 1

    Спасибо сказали:

    chater(14.03.2016),
  4. Студент Аватар для chater
    • Регистрация: 27.03.2012
    • Сообщений: 65
    • Репутация: 2
    Septik, да, получилось. Добавил вот сюда
    Код HTML:
    <div id="vk_groups"></div>
    margin-top, получилось
    Код HTML:
    <div id="vk_groups" style="margin-top: 30px;">
    Теперь всё отображается верно. Единственно что, при отведении курсора в сторону, окошко не охотно прячется (курсор чуток вверх нужно сдвигать), но это из-за размера окошка скорее всего. Думаю разберусь. Благодарю за подсказку.
    Я то мучал вот этот блок
    Код HTML:
    <div class="overlay">
    , не дошло что нужно чуть ниже спуститься)
    Последний раз редактировалось chater; 14.03.2016 в 03:07.
    • 0

Похожие темы

Темы Раздел Ответов Последний пост
Помогите Разобраться:)
Общие вопросы поисковой оптимизации 0 19.08.2013 10:50
Помогите, не могу разобраться.
DLE 7 02.08.2013 19:07
Помогите разобраться
Вопросы от новичков 1 21.11.2011 11:53
Помогите разобраться с Яндексом
Поисковые системы 9 08.10.2011 14:22
Помогите разобраться
Поисковые системы 7 06.06.2011 14:22

У кого попросить инвайт?

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

Информеры